How do I change the color of a specific drop down menu item in Debut theme?

Solved
ABC2020
Tourist
3 1 4

Hello! I have been searching the Shopify forums for hours and can't seem to find the solution for this. I'd like to change the color of one dropdown menu item (I'm using the Debut theme). I've gotten this to work before but the menu item wasn't a dropdown, so I think that's why the same code isn't working. This is what I've used that works for a link but not a dropdown:

 

.site-nav__link[href*="/collections/gifts"] {
    color: #be1e2d!important;
  font-size: 20px;
}
 
If anyone could help me that would be amazing! Thank you so much!
Accepted Solution (1)

Accepted Solutions
ABC2020
Tourist
3 1 4

This is an accepted solution.

SOLVED! For anyone else searching for this issue endlessly like I was, I finally figured it out.

 

Go to your website, right click the menu item you want to change the color of, then click Inspect.

 

On the right side window that pops up, there should be text selected that says something like <span class"site-nave__label">YOUR MENU ITEM</span> -- Right click that line and click Copy then Copy Selector.

 

Then go to your theme.scss.liquid and at the very bottom paste what you copied. 

 

After what you pasted you will add something like this to change the color:

 

{
    color: #be1e2d!important;
}
 
ALSO if you want an app that does this then I recommend the app Smart Menu - they have a free plan available.

View solution in original post

Replies 5 (5)
ABC2020
Tourist
3 1 4

This is an accepted solution.

SOLVED! For anyone else searching for this issue endlessly like I was, I finally figured it out.

 

Go to your website, right click the menu item you want to change the color of, then click Inspect.

 

On the right side window that pops up, there should be text selected that says something like <span class"site-nave__label">YOUR MENU ITEM</span> -- Right click that line and click Copy then Copy Selector.

 

Then go to your theme.scss.liquid and at the very bottom paste what you copied. 

 

After what you pasted you will add something like this to change the color:

 

{
    color: #be1e2d!important;
}
 
ALSO if you want an app that does this then I recommend the app Smart Menu - they have a free plan available.
Thor_ZA
New Member
2 0 0

Sincere Thanks @ABC2020 Exactly what i was after 😉

Nourdennaoui
Tourist
8 0 1

hi 

.site-nav__link[href*="/collections/gifts"] {
    color: #be1e2d!important;
  font-size: 20px;
this code how do u implement it 
Thor_ZA
New Member
2 0 0

Hi @Nourdennaoui 

@ABC2020 describes implementation in his post. I can confirm that it is working as intended.

Kind Regards
Thor 

 

Alia_Makarem
Shopify Partner
60 0 18

Hello, 

 

I tried your solution and it worked, but how can I apply it to Mobile view.

 

Thanks,

Alia