FROM CACHE - en_header

Debut Theme: How to change the color of navigation menu

Solved
MarieG
New Member
4 0 0

Hello,

I would like assistance in changing the color of the main menu. Where the menu with a dropdown has its color and the menu without a dropdown has its own color.

Therefore I would like to have the same color for the entire navigation menu. customize color.PNG

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2791 526 714

This is an accepted solution.

@MarieG, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.mobile-nav__label,
.site-nav__link{
    color: #000000 !important;
}


You can change the #000000 to any hex color you wish.

Kind regards,
Diego

View solution in original post

Replies 12 (12)
oscprofessional
Shopify Partner
12058 1872 2399

Hello,
Please share your site url.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
MarieG
New Member
4 0 0
Anonymous
Not applicable

hii, @MarieG 
your site is password protected can you provide me password.
Thank You.

oscprofessional
Shopify Partner
12058 1872 2399

Password please

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
diego_ezfy
Shopify Partner
2791 526 714

This is an accepted solution.

@MarieG, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.mobile-nav__label,
.site-nav__link{
    color: #000000 !important;
}


You can change the #000000 to any hex color you wish.

Kind regards,
Diego

MarieG
New Member
4 0 0

Thank you Diego, 

Your guidance was helpful. 

But after the edit, the whole menu and dropdown were underlined. And I would like that it to get underlined when it is only selected. 

underline.PNGMay you please assist me with that.

oscprofessional
Shopify Partner
12058 1872 2399

share password

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
MarieG
New Member
4 0 0

Go on, the password is disabled. 

diego_ezfy
Shopify Partner
2791 526 714

@MarieG 

Please follow the previous steps and add this extra code:

.mobile-nav__link--active .mobile-nav__label,
.site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label{
    border-bottom: unset !important;
}

header.site-header h1, header.site-header nav li a{
    color: inherit !important;
}


Kind regards,
Diego

ianh182
New Member
1 0 0

Hi Diego,

 

Tried loads of solutions to get my mobile menu to work, and yours is the only one that has. Do you have code to change the background colour of the mobile menu? Not just the font?

 

Thanks,

Ian.

angelamesat
Excursionist
13 0 7

Please you can help me? I´m trying to chance the color of the MENU but when I did it, show me the light color.

My URL https://mariaemma.com.co/

oscprofessional
Shopify Partner
12058 1872 2399

@angelamesat ,

.site-nav__label {
    color: red;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

Note : Change the color as you want.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing