Customizing header menu design and layout for Dawn theme

Store Design
, , , , ,
1

I’ve been trying to days to create coding to make the header menu list how I’d like for it to appear. I’m wanting the menu along the bottom of the header, under the site logo, but I want the menu “bar” to be a different color than the background of the header itself. Then to be able to change the colors upon hover. Can anyone provide coding to help me achieve this?

Closest thing I can find to what I’m looking to do as an example would be pastelgrid.com if that helps.

Thank you in advance!

2

Hi @leesa22 ,

In dawn you can set the Desktop logo to “Top Center” to achieve that look. For color customization, can you provide link to the store? And also provide the color codes so that i can write a CSS accordingly.

theycallmemakka_0-1712375370399.png
theycallmemakka_0-1712375370399.png1893×546 148 KB

3

I’ve already set the nav bar to center under the logo. I’m just struggling with figuring out the colors and blocks for the nav bar itself. website: https://emmysluxeboutique.myshopify.com/ password=“password”

I’d like for the entire bar background-color (from left to right of screen) to be hex #C17D55 with ‘color: #FCF0D9;’

Then upon hover, ‘background-color: ##FCF0D9;’ with ‘color: #432C39;’

Thank you!

4

Hi @leesa22

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

theycallmemakka_0-1712378971094.png
theycallmemakka_0-1712378971094.png1902×412 48.2 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

5

I’d like for the header background to stay white and only the nav bar to be #C17D55. Example: pastel grid.com

Thank you!