How to give certain navigation links a specific # color code?

[VinUp]

Hi,

I would like to give the Summer Sale navigation link the color code: #E19F67 and i would like the navigation links: houders, lijsten, muurhouders and opslag to be bold. How can i do this?

[Anshul_arora]

Hello @VinUp ,

I understand you are looking to make changes in your navigation menu link.

The changes can be implemented with using CSS code

Add the code at the bottom of theme.liquid file before </body> tag and save.

<style>
a[href="/en/pages/summer-sale"] {
color: #E19F67;
}
a[href="/en/collections/stands"] {
font-weight: bold;
}
a[href="/en/collections/lijsten"] {
font-weight: bold;
}
a[href="/en/collections/wall-display"] {
font-weight: bold;
}
a[href="/en/collections/storage"] {
font-weight: bold;
}
</style>

Output -:

I hope the code helps you.

Please share if you have any queries.

Thank you.

[BSSCommerce-TC]

Hi @VinUp ,

You can follow these steps

Step 1: Go to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

#HeaderMenu-summer-sale {
    color: #E19F67;
}

#HeaderMenu-houders ,
#HeaderMenu-lijsten ,
#HeaderMenu-muurhouders, 
#HeaderMenu-opslag {
   font-weight: 700;
}

If our suggesstion is useful, please let us know by giving a like and mark as a solution. Thank you very much

[Dan-From-Ryviu · Accepted solution]

Hi @VinUp 

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings. 

#HeaderMenu-summer-sale { color: #E19F67 !important; }
#HeaderMenu-houders, 
#HeaderMenu-lijsten, 
#HeaderMenu-muurhouders,
#HeaderMenu-opslag { font-weight: 700 !important; }

[polo_msweb]

Hi @VinUp,

This is Polo From MS Web Designer. 
I would love to assist you with your concern. Could you please share your store URL so that we can provide the proper solution.

If you have doubt, please let me know.

Regards
Polo