Solved

Debut Theme: How to change the color of navigation menu

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)

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 12 (12)

oscprofessional
Shopify Partner
15830 2369 3071

Hello,
Please share your site url.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
MarieG
New Member
4 0 0
Not applicable

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

oscprofessional
Shopify Partner
15830 2369 3071

Password please

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
angelamesat
Excursionist
15 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
15830 2369 3071

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

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
15830 2369 3071

share password

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
MarieG
New Member
4 0 0

Go on, the password is disabled. 

diego_ezfy
Shopify Partner
2935 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ianh182
Visitor
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.