How can I change the menu color in the Dawn theme?

[ebon]

I want to change the menu/nav color in the Dawn theme.

does anyone have code for this?

Thank you

[Zworthkey · Accepted solution]

hii, @ebon 
Paste this code on top of the base.scss file.

a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
    color: black !important;
}

summary.header__menu-item.list-menu__item.link.focus-inset {
    color: black !important;
}

Thank You.

[suyash1]

@ebon - can you please share your website link? which menu item and which color do you want to change?

[ebon]

preacha.com

the main menu is the what i want to change.

Black is the color thank you

[dmwwebartisan]

@ebon 

Please add the following code at the bottom of your assets/base.css file.

.header__menu-item, .header__menu-item:hover { color: #000 !important; }

Hope this works.

Thanks!

[VeeZed]

@dmwwebartisan your solution worked for me on Sense Theme 2.0 Thankyou! Is there something I need to add to make the mobile site the same?? This has only changed the desktop site.

[suyash1]

@ebon - please add this css to the very end of base.css file and check, should look like given screenshot

.header__menu-item {
    color: #000;
}

[Zworthkey · Accepted solution]

hii, @ebon 
Paste this code on top of the base.scss file.

a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
    color: black !important;
}

summary.header__menu-item.list-menu__item.link.focus-inset {
    color: black !important;
}

Thank You.

[ebon]

Thank you!

how do you make the font bigger?

[Zworthkey · Accepted solution]

@ebon 
Paste this code for font-size.

summary.header__menu-item.list-menu__item.link.focus-inset {
    font-size: 20px !important;
}
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
    font-size: 20px !important;
}

Thank You.

[ebon]

in the same spot along with the last code?

[Zworthkey]

@ebon 
Yes .
On top of the base.css file.
Thank You.

[Eleftheria2022]

what if i want to change only one specific item's color?

[Zworthkey]

@Eleftheria2022 
you can change by providing the conditions on it.

{% if product == 'your product name ' %}

{

.element{color:red;}
}

[Eleftheria2022]

i mean if i want to change a specific collection's color in menu/nav to red, what code do i have to enter?
example below the collection "ΠΡΟΣΦΟΡΕΣ"

 thanks in advance.

[Eleftheria2022]

another "REAL" example but in wordpress.

[Nico38]

please your url ? @Eleftheria2022 

[Eleftheria2022]

www.saketistore.com.gr

Thank you

[Nico38]

@Eleftheria2022 try this on bottom base.css

.list-menu a[href="/collections/προσφορές"] {
color:#ff0000!important;
}

[Nico38]

@Eleftheria2022 how to change label sales to percentage ? i need 😛

[Eleftheria2022]

Here is your video to change "SALES" badge to percentage
https://www.youtube.com/watch?v=JPU6cmJ_2Gg

Also you code doesn't working.

[Nico38]

@Eleftheria2022 have dawn theme ?

[Eleftheria2022]

yes dawn theme 2.1.0. version

[Nico38]

are you sure don't work because work for me

www.street-style.fr

[Eleftheria2022]

yeah sure. code is still applied, i also tried #ff7000 and just "red" but nothing happend.

[ebon]

Thank you

[inspirea]

@Zworthkey Hi I tried this as well but it changed the color of one of the navigation links... and not the home page link

[nicolelala]

Hi there,

this only seems to work on desktop, but not on mobile? Could you maybe share a code that changes the color on all devices?

[Luco001]

Hi, and if i wanna change the background on hover the menu i have to code:

a:hover.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {

}

??? correct me if i made a mistake please

[Eleftheria2022]

Hello Luco001

I found a solution for me and i changed it by searching all my elements via DevTools.

If you use Dawn theme and want me to help you let me know.

Thank you.

[Luco001]

hiiii yes your help will bwe more than welcome

[Eleftheria2022]

I send a personal message to your profile here in community, let me know when you reply to check my inbox.

Thanks.

[Luco001]

I just texted you back

[knotalabel]

would love a solution to this too please thanks

[BChristine]

What if I want to change the background color of the navigation? How would I do that?