[debut theme] Change font color of main menu

Highlighted
New Member
12 0 0

Hi Shopify Gurus! 

First of all, thanks for taking the time helping resolve issues that we wouldn't sort out on our own. Your dedication is appreciated. It's been a while that I'm looking to solve a particular issue. I know the question has been asked before but the replies are currenlty outdated. Here's my situation : 

I would like to change the font color of the main menu, without changing the font color of everything else on my site.

Looking forward for your reply,
John


 

0 Likes
Highlighted
Pathfinder
112 1 34

Hey John, can you link your site so I can help you out with this?

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Highlighted
New Member
12 0 0

Hi, 

I can't provide you my website url at the moment, but I took a screen capture so you can see my situation. Images : https://imgur.com/a/tT6Ce . Basically, I would like to change the font color of my main menu without changing the font of everything else on my site.

Thanks again and looking forward to hear from you!
John

0 Likes
Highlighted
Pathfinder
112 1 34

You are going to have to edit your theme's stylesheet. I'll walk you through it.

Go to your admin panel.

  1. Click on the Online Store link on the left menu under Sales Channels.
  2. Click on the Themes link on the left menu.
  3. Click on the white Actions drop down button on your active theme then select Edit code.
  4. You should now see a list of files and folders.
  5. Click on the Assets folder. There should be a theme.scss.liquid file. Click on that.
  6. Scroll down to the bottom of the text area that appears and copy and paste following code at the end:
    /*===== Change header and nav item color - Feb 5, 2018 ======*/
    header.site-header h1,
    header.site-header nav li a {
      color: #000000;
    }
  7. #000000 is the hex code of the color. Use this site to find the hex code for the color you want to use and change it in the code above: http://htmlcolorcodes.com/
  8. Click on the white Save button.

The colors of the header and navigation should now be changed. 

Let me know if you need any more help!

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Highlighted
New Member
12 0 0

Thanks Alex, it worked like a charm! 

However, the icons didn't take the color and stayed black. 
Is there a way to fix this? Also, can you do the same for the footer font & icons color?
Here are the images : https://imgur.com/a/RPXEr

Again, thanks for your help Alex! It is deeply appreciated,
John
 

0 Likes
Highlighted
Pathfinder
112 1 34

Edit the previous CSS to look like this:

/*===== Change header, nav item, icons, footer items color - Feb 6, 2018 ======*/
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: #000000;
}

 

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Highlighted
New Member
12 0 0

Perfect, it worked! 
Thanks for your help Alex, it really is appreciated!

John

0 Likes
Highlighted
New Member
12 0 0

Hi Alex, 

Hope you are doing great! I have one more question for you, I'd like to change the font color of the text in the search bar. Sending you an image : https://imgur.com/a/RSgka

Thanks,
John

0 Likes
Highlighted
New Member
1 0 0

Hey,

This changes the colour of all menu Items. Is it possible to Change just one Item in the Menu like "SALE" for Debut Theme. I did see some post for Other themes but can't seem to find anything for debut.

 

Thanks

0 Likes
Highlighted
New Member
1 0 0

Hi, 

 

Yes, you can just change the color of only one menu tab like SALE like this:

Go to Navigation and on the title add this code: <font color="red">SALE</font> you can change the color name to whatever color and also the SALE name to whatever you cant to call it. It will look like this: attachedScreen Shot 2020-11-10 at 2.04.13 PM.png 

0 Likes