Menu Bar Dawn Theme

Technical Q&A
, ,

Topic summary

A user wanted to separate the navigation menu bar from the header in the Dawn Shopify theme to apply different background colors, as shown in an attached example image.

Solution provided:

  • Set the header “logo position” to “top center” in theme settings
  • Add custom CSS targeting .list-menu with full viewport width and custom background color
  • Remove bottom padding from the header element

Issue encountered:
The initial code caused dropdown menus to stretch across the entire screen width.

Final fix:
Changed the CSS selector from .list-menu to nav > .list-menu to specifically target only the main navigation menu without affecting dropdown submenus.

The issue was resolved with the refined CSS code, which successfully separated the menu bar visually while maintaining proper dropdown menu dimensions.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I would like to separate the menu (navigation) bar from the header so that they can be different colours like in the picture below. Is this possible?

I have tried a couple of code changes in the custom css box but they either change the alignment of the text in the drop down boxes or affect the mobile layout.

Can anyone help with the code required?

Thanks

Homepage example.jpg
Homepage example.jpg1031×294 18.6 KB

2

Paste this code into “Custom CSS” setting of the Header section ( you need to select “logo position”: “top center” first):

.list-menu {
  margin-left:  calc(50% - 50vw);
  width: 100vw;
  background: rgba(100,0,0,0.2);
}

.header.header--top-center {
  padding-bottom: 0;
}

Screenshot 2025-05-01 at 9.07.37 PM.png
Screenshot 2025-05-01 at 9.07.37 PM.png1061×396 36.1 KB

3

Brilliant thanks :slightly_smiling_face: Is their a way to reduce the width of the drop downs when you click on them as they are filling the screen.

Thanks

I changed margin-left to margin-center which did help the left side but it is still stretching all across the right side of the homepage.

margin center.jpg
margin center.jpg1920×2069 394 KB

margin-left.jpg
margin-left.jpg1920×2413 899 KB

4

Right, let’s use a different selector then – replace the code with this:

nav > .list-menu {
  margin-left:  calc(50% - 50vw);
  width: 100vw;
  background: rgba(100,0,0,0.2);
}

.header.header--top-center {
  padding-bottom: 0;
}

Sorry, that test shop of mine did not have drop-downs

5

Perfect, thank you so much for your help!