Solved

How to change color in single navigation menu in Debut Theme - red

boldshapes
New Member
6 0 0

Hey,

I am using Debut Theme on my store boldshapes.co

I would like to change color of "Outlet" only in my header menu to red color or to #FF3333 if possible 

How can i make it?

Capture d’écran 2021-07-28 100800.png

Accepted Solution (1)

diego_ezfy
Shopify Partner
2958 568 890

This is an accepted solution.

@boldshapes, 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:

button[aria-controls*='black-friday'] > .site-nav__label, button[data-target*='black-friday'] .mobile-nav__label{
    color: #FF3333 !important;
}


This will work for all browsers and devices: mobile, tablets and desktop.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

View solution in original post

Replies 10 (10)

ZestardTech
Shopify Expert
5393 971 1293

Hello There,

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

ul#SiteNav li:nth-last-child(1)>button.site-nav__link.site-nav__link--main.site-nav__link--button span.site-nav__label {
color: #FF3333!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
boldshapes
New Member
6 0 0

Hello,

thank you for your help but stil doesn't work.

Could you help me ? 

https://www.boldshapes.co/

Thank you

Zworthkey
Shopify Partner
5581 642 1567

@boldshapes 

ul#SiteNav li:last-child > a>span {
    color: red !important;
}

Add this code in theme.scss

boldshapes
New Member
6 0 0

Thank you @Zworthkey , it's working.

 

But i would like the first menu instead of the last one.

The "Black Friday" one.

https://www.boldshapes.co/

How can i change that ?

 

THank you

Zworthkey
Shopify Partner
5581 642 1567
li.site-nav--has-dropdown:first-child > button span {
    color: red !important;
}

@boldshapes 
Add this code and try instead of previous code

ZestardTech
Shopify Expert
5393 971 1293

Hello There,

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

li.site-nav--has-dropdown:first-child > button span {
color: red !important;
}

Screenshot :- https://image.prntscr.com/image/mvjnYx93QuSeLL4IjLSD3g.png

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Zworthkey
Shopify Partner
5581 642 1567
ul#SiteNav li:nth-last-child(1)>button.site-nav__link.site-nav__link--main.site-nav__link--button span.site-nav__label {
color: #FF3333!important;
}


Add this code to theme.cssThank you.

diego_ezfy
Shopify Partner
2958 568 890

This is an accepted solution.

@boldshapes, 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:

button[aria-controls*='black-friday'] > .site-nav__label, button[data-target*='black-friday'] .mobile-nav__label{
    color: #FF3333 !important;
}


This will work for all browsers and devices: mobile, tablets and desktop.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.
boldshapes
New Member
6 0 0

Thank you, that's perfect !

Alia_Makarem
Shopify Partner
63 0 18

Hi Diego,

 

I tried to work this on my website, but nothing changed, please can you help me out with it?

https://radstudiolb.com/

Menu item to change "Outlet", I switched 'black-friday' from your code to 'outlet' , but nothing happened.

 

Thanks,

Alia