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
Topic summary
A user wants to separate the navigation bar from the header in Shopify’s Dawn theme and apply different colors to each section, similar to a reference image provided.
Solution Provided:
- Set the header’s desktop logo position to “Top center” in theme customization settings
- Add custom CSS code to either
base.cssortheme.liquidfile to create a colored background for the navigation bar - The CSS creates a pseudo-element that adds a colored bar (background: #a1c0aa) beneath the header
Implementation Issues:
- Initial poster struggled to implement the solution, possibly due to code conflicts in their customized theme
- The code worked on a fresh Dawn theme but not on their modified version, suggesting existing code overlap
- Another user successfully implemented it but encountered mobile display problems with excessive padding on the blue menu banner
- A third user reported issues with dropdown menus after implementation: menu buttons only appear on hover, and subcategory text displays in white instead of black
The discussion remains open with unresolved mobile responsiveness and dropdown functionality issues.
1 Like
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!
2 Likes
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 
1 Like
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
- Create a new line and paste the code below
- And Save.
- See image below for placement reference
2 Likes
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!
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!
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?