How can I adjust the font color for specific menu items on Debut theme?

Technical Q&A
1

So after I found a code to change my header to black, I needed to change my menu font color to white without changing the font color on the rest of the page. I used this code to do that:

/===== Change header, nav item, icons, footer items color - Feb 6, 2022 ======/
header.site-header h1,
header.site-header a,
header.site-header svg,
footer.site-footer small,
footer.site-footer a,
footer.site-footer svg {
color: #ffffff;
}

It changed all menu words except for ‘shop’, which is a drop down button. How can I change that to white to match the rest of the menu? Also, all the dropdown text is white and I’m not sure how to change it back to black. I would also like to change the hover color to a different color (it’s a dark grey).

Any help would be greatly appreciated!

My website is www.thekosmicchild.com

2

Hi Cbee24,

Adding .site-nav__link to your list should make your “Shop” text white.

Adding .site-nav__link:hover to your style sheet should allow you to change your hover color. If you wanted it to be the pink in your Shop Now button for example, you could use.

.site-nav__link:hover {
color: #ff5cc2;
}

Adding the below to your style sheet should make your submenu links black again

.site-nav__dropdown .site-nav__link{
color:black;
}

3

You will need to put in below code to the last line of your under your theme.css

by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code

This one updates your main nav text, your dropdown icon, and mobile menu text white.

header .site-nav .site-nav__link.site-nav__link–main span.site-nav__label, header .site-nav .site-nav__link.site-nav__link–main .icon-chevron-down, .site-header__icons-wrapper .site-header__icon {color: white;}

header .site-nav .site-nav__link.site-nav__link–main span.site-nav__label:hover, header .site-nav .site-nav__link.site-nav__link–main .icon-chevron-down:hover, .site-header__icons-wrapper .site-header__icon:hover {color: grey;}

4

Hi Daniel,

It worked! The shop text is now white. Thank you! But would you know how to make the drop down button black? They are only black when I hover over it.

5

Try adding this to your style sheet

.site-nav__dropdown .site-nav__link{
color:black;
}

6

Please add these to at the end of the css file

.mobile-nav a.mobile-nav__link, .site-nav__dropdown .site-nav__link {color: black;}
.mobile-nav a.mobile-nav__link:hover, .site-nav__dropdown .site-nav__link:hover {color: grey;}

7

It worked! Thank you so much! I appreciate your help.

8

Not a problem. Please feel free to reach out to me if you have any questions in the future.

9

Hi again! So I was looking at my website on mobile and noticed when I click on the dropdown button it is all white like before and will turn black if I hover. It was like the last problem I had with desktop but only the mobile version this time. I would really appreciate your help with a code! Thanks is advance

10

Sure, please add this line

button.btn--link.mobile-nav__return-btn svg, .mobile-nav__sublist-link { color: black !important; }
11

Thank you so much! Worked like a charm :slightly_smiling_face: I appreciate your help!