Moving Navigation Bar Out of Header in Dawn Theme

morganleslee · ‎11-14-2023

I would love to be able to edit the navigation bar separately from the header and have it be a separate color from the header.
Something like this:

I'd also like to add a secondary side bar menu down the side if possible!

Cheers!

Morgan

Made4uo-Ribe · ‎11-15-2023

Hi @morganleslee

You did the instructions right. You might get an error in your base.css file. Lets paste the code in a different way. Please remove the code we paste in base.css and follow the instructions below

From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Layout" folder, click on "theme.liquid" file
Find the <body... tag, see below code

  <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">

Create a new line and paste the code below

<style>
sticky-header.header-wrapper.gradient:after {
    content: "";
    background: #a1c0aa;
    display: block;
    width: 100%;
    height: 50px;
    margin-top: -70px;
}

sticky-header.header-wrapper.gradient {
    position: relative;
}

.header__active-menu-item,.header__menu-item,span.header__active-menu-item  {
    color: white;
}
</style>

And Save.
See image below for placement reference

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Dan-From-Ryviu · ‎11-14-2023

Go to your Online store > Themes > Customize > Header > Desktop logo position > Top center

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Made4uo-Ribe · ‎11-14-2023

Hi @morganleslee

Certainly can achieve this. Please follow the instructions below

Please make sure your header is set to top center

From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Customize"
Click the header and it should open the settings on the side
Under the Desktop logo position make sure you have Top center

Next, we need to add the code.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

sticky-header.header-wrapper.gradient:after {
    content: "";
    background: #a1c0aa;
    display: block;
    width: 100%;
    height: 50px;
    margin-top: -70px;
}

sticky-header.header-wrapper.gradient {
    position: relative;
}

.header__active-menu-item,.header__menu-item,span.header__active-menu-item  {
    color: white;
}

And Save.
Result

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

morganleslee · ‎11-14-2023

I can't seem to get it to work. 😪 I'm still very hopeful. If it wasn't 11:30 PM I'd probably have a slightly fresher mind to scratch this out. haha 😅

Made4uo-Ribe · ‎11-15-2023

Hi @morganleslee

You did the instructions right. You might get an error in your base.css file. Lets paste the code in a different way. Please remove the code we paste in base.css and follow the instructions below

From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Layout" folder, click on "theme.liquid" file
Find the <body... tag, see below code

  <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">

Create a new line and paste the code below

<style>
sticky-header.header-wrapper.gradient:after {
    content: "";
    background: #a1c0aa;
    display: block;
    width: 100%;
    height: 50px;
    margin-top: -70px;
}

sticky-header.header-wrapper.gradient {
    position: relative;
}

.header__active-menu-item,.header__menu-item,span.header__active-menu-item  {
    color: white;
}
</style>

And Save.
See image below for placement reference

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

morganleslee · ‎11-15-2023

So I must have some overlap of code somewhere that is blocking this code from working. I added a new 'Dawn' theme and added the code in and it worked perfectly.

I then made a copy of my original 'Dawn' theme and copied the entire theme.liquid code from the new theme to the copy and it still doesn't show up on the copy.. so I just need to browse through that to find it!

You have been an INCREDIBLE help!

KateD199 · ‎04-18-2024

Hi there, this worked for my theme - thank you! The only issue I'm having now is how it displays on mobile. Is there a way to remove/hide this code for mobile and have that display as normal?

See attached screenshot - I made the banner for the menu blue which looks great on desktop but is too much on mobile, and no amount of padding will fix it. Thank you!

liquordept · ‎08-26-2024

I tried this method but now when i used my dropdown menu, the menu buttons only show on hover and the subcategory text is white instead of black. does anybody know how to fix this please?

Moving Navigation Bar Out of Header in Dawn Theme

Moving Navigation Bar Out of Header in Dawn Theme

Community Blog Articles