Menu Bar Dawn Theme

Technical Q&A
, ,
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!