Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Re:

How to change the menu color on dawn theme?

twacomm-store
Tourist
9 0 2

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.

Replies 28 (28)

PageFly-Richard
Shopify Partner
4801 1084 1750

Hi @twacomm-store 

 

Can you share with me the page url..

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

MarinaPetrovic
Shopify Partner
559 124 191

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

.header-wrapper--border-bottom{
background:#a01f1f!important;
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
twacomm-store
Tourist
9 0 2

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

 

1605925f-9260-4ade-93ba-16011ce1d499.png

MarinaPetrovic
Shopify Partner
559 124 191

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

.header__menu-item span{
color:#a01f1f;
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
twacomm-store
Tourist
9 0 2

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

37fc49c1-343d-4b42-bb58-d4cabfa62b98.png

MarinaPetrovic
Shopify Partner
559 124 191

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

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
twacomm-store
Tourist
9 0 2

https://vikingtelecomsolutions.myshopify.com

 

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

MarinaPetrovic
Shopify Partner
559 124 191

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

.header__inline-menu{
background:#a01f1f;
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
twacomm-store
Tourist
9 0 2

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

MarinaPetrovic
Shopify Partner
559 124 191

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'.

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Boky
Tourist
4 0 1

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
Shopify Partner
559 124 191

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

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Boky
Tourist
4 0 1

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

MarinaPetrovic
Shopify Partner
559 124 191

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;
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
junebugdarlin
Visitor
1 0 1

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
Shopify Partner
3 0 0

I also looking for the same solution here

FHostman
Visitor
1 0 0

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

 

MarinaPetrovic
Shopify Partner
559 124 191

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

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
LirioDumplings
Visitor
2 0 0

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!

Screenshot 2023-11-25 at 3.21.30 AM.png

LirioDumplings
Visitor
2 0 0

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!

ali-s-couture
Visitor
1 0 0

Hello Lirio,

 

The coding you provided worked great for the first menu item but I want it to be on the eight menu item Sale. I changed the number to (8) and it did not work. My menu changes depending on the what collections are in season so I would have to make note where I make the change so I can change the code as the position on the menu changes, is that correct?  Here's my url: https://aliscouture.com/

SamiGiftsi
Excursionist
20 0 3

Hiya Marina,

This worked for me, however my menu bar is not fully across the page. It has a white section either side, which part of the code do I need to edit to fix this please? Thanks

a2c11b9e645ffb4cce9cd97da76f0395.png

liemanco
New Member
7 0 0

I'm having this same issue!

MarinaPetrovic
Shopify Partner
559 124 191

Please share url so I can take a look. 🙂

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Luvpip
Tourist
10 0 0

Hi @MarinaPetrovic 

You have been amazing and sadly I have joined the chat a bit later 😄

 

Could you please have a look at my website too by any chance? I've tried that 4-5 different codes but none of them worked for me.

 

I would like the SALE collection to be colored to #C51E3A in the navigation. FYI I'm using Buddha mega menu navigation app if that could be the problem why it's not working for me.

 

The website's URL is this: https://luvpip.com/

 

Thanks for looking into this 🙂

MarinaPetrovic
Shopify Partner
559 124 191

Hi @Luvpip  go to edit code > assets > base.css and add this:

li.buddha-menu-item:first-child a{
color:#C51E3A;
}

 

Best

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Luvpip
Tourist
10 0 0

Hi @MarinaPetrovic 

 

It worked, you are amazing. Thank you very much!