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

Store Design
1

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
Capture d’écran 2021-07-28 100800.png1898×491 172 KB

2

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;
}
3 
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.

4

Hello,

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

Could you help me ?

https://www.boldshapes.co/

Thank you

5

@boldshapes

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

Add this code in theme.scss

6

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

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

@boldshapes
Add this code and try instead of previous code

8

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

9

@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

1 Like
10

Thank you, that’s perfect !

11

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