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

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

Solved

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

ebon
Pathfinder
117 3 42

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

does anyone have code for this?

 

Thank you

Accepted Solutions (2)
Zworthkey
Shopify Partner
5581 642 1583

This is an 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.

View solution in original post

Zworthkey
Shopify Partner
5581 642 1583

This is an 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.

View solution in original post

Replies 33 (33)

suyash1
Shopify Partner
10130 1253 1593

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
ebon
Pathfinder
117 3 42

preacha.com

the main menu is the what i want to change.

Black is the color thank you

dmwwebartisan
Shopify Partner
12323 2552 3732

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
VeeZed
Shopify Partner
25 0 7

@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
Shopify Partner
10130 1253 1593

@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;
}

 

suyash1_0-1630676334581.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Zworthkey
Shopify Partner
5581 642 1583

This is an 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
Pathfinder
117 3 42

Thank you!

how do you make the font bigger?

Zworthkey
Shopify Partner
5581 642 1583

This is an 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
Pathfinder
117 3 42

in the same spot along with the last code?

Zworthkey
Shopify Partner
5581 642 1583

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

Eleftheria2022
Explorer
66 0 16

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

Zworthkey
Shopify Partner
5581 642 1583

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

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

{

.element{color:red;}
}

Eleftheria2022
Explorer
66 0 16

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 "ΠΡΟΣΦΟΡΕΣ"

Στιγμιότυπο οθόνης (175).png

 thanks in advance.

Eleftheria2022
Explorer
66 0 16

another "REAL" example but in wordpress.Στιγμιότυπο οθόνης (176).png

 

Nico38
Trailblazer
172 5 61

please your url ? @Eleftheria2022 

Eleftheria2022
Explorer
66 0 16
Nico38
Trailblazer
172 5 61

@Eleftheria2022 try this on bottom base.css

 

 

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

Nico38
Trailblazer
172 5 61

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

Eleftheria2022
Explorer
66 0 16

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
Trailblazer
172 5 61

@Eleftheria2022 have dawn theme ?

Eleftheria2022
Explorer
66 0 16

yes dawn theme 2.1.0. version

Nico38
Trailblazer
172 5 61

are you sure don't work because work for me

 

www.street-style.fr

Eleftheria2022
Explorer
66 0 16

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

ebon
Pathfinder
117 3 42

Thank you

inspirea
Shopify Partner
46 0 4
@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
Visitor
3 0 0

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
New Member
9 0 0

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
Explorer
66 0 16

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
New Member
9 0 0

hiiii yes your help will bwe more than welcome

 

Eleftheria2022
Explorer
66 0 16

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

 

Thanks.

Luco001
New Member
9 0 0
I just texted you back
knotalabel
Visitor
1 0 0

would love a solution to this too please thanks

BChristine
Tourist
6 0 1

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