How to change the menu color on dawn theme?

[twacomm-store]

Hi, I am currently using the dawn theme and I want to change the menu color to #a01f1f. Can anyone help me with this? I would really appreciate it.

[PageFly-Richard]

Hi @twacomm-store 

Can you share with me the page url..

[twacomm-store]

https://vikingtelecomsolutions.myshopify.com

[MarinaPetrovic]

Hi @twacomm-store , go to edit code > assets > base.css and add this:

.header-wrapper--border-bottom{
background:#a01f1f!important;
}

[twacomm-store]

Thank you so much for your reply. I tried that but made the header a different color and not just the menu. Any ideas. Thanks again for your help

[MarinaPetrovic]

Yeah, I though that you meant menu background. 😂
Go to edit code > assets > base.css and add this:

.header__menu-item span{
color:#a01f1f;
}

[twacomm-store]

Well were getting there. Now it just made the text red, but not the navigation bar.

[MarinaPetrovic]

@twacomm-store , well that's specific. You have to share url so I can send you the code. 🙂

[twacomm-store]

https://vikingtelecomsolutions.myshopify.com

Thanks you much Marina for your help! I really appreciate it!

[MarinaPetrovic]

No problem, go to edit code > assets > base.css:

.header__inline-menu{
background:#a01f1f;
}

[twacomm-store]

That worked!!!! Your the best! Do you know how to make the menu bar full page?

[MarinaPetrovic]

Hi @twacomm-store , go to edit code > sections > header.liquid and look for this:

<header class="header header--top-left page-width header--has-menu">

Remove 'page-width'.

[Boky]

Hi @MarinaPetrovic, I am trying to do the same thing as @twacomm-store did. I managed to change the color to white, but can't get the menu bar to be full page. 

It seems as if the code in the latest Dawn theme version might be a little bit different. 

Any ideas how to get the menu to be full page? Thank you.

<header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %}">

[MarinaPetrovic]

Hey @Boky , please share URL so I can take a look. 🙂

[Boky]

Thanks for the fast response. I've sent you a PM.

[MarinaPetrovic]

Hey @Boky , go to edit code > sections > header.liquid, look for this:

 <header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}">

replace it with:

 <header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} {% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}">

After that go to assets > base.css and add this:

.header__inline-menu{
width:100%;
text-align:center;
}

[junebugdarlin]

Hi @MarinaPetrovic - do you know how to change the color of just one item in the header navigation? I want my 'sale' section to be red, but keep all my other navigation headers black.

Thanks!

[Hardkoder]

I also looking for the same solution here

[FHostman]

Hey @MarinaPetrovic do you know, how can I change only one (the first) menu item's font's color?

[MarinaPetrovic]

Hi @FHostman , please share url so I can take a look. 🙂

[LirioDumplings]

like a few people posting at the end here, I am also looking for a solution to change the color of just a single menu item in the header of the dawn theme. 

Here is my url https://liriodumplings.com/

ideally, the word 'tienda' would be red.

Thank you!

[LirioDumplings]

oh, actually I think I figured it out for others who might be interested 

Going to the edit theme code page, under 'Assets' find the base.css and add 

.header__inline-menu .list-menu li:nth-child(1) a{color: red !important;}

anywhere after where it says ":root {"

just change 'red' to whatever color or color code you want. and change the number in the parenthesis after "child" to the corresponding menu item you want to change the color of. In this case, 1 was the first item, but if you wanted to changed it to the third item for example, change it to (3). 

Cheers!