How can I change the font and color of my navigation menu?

How can I change the font and color of my navigation menu?

Dom2306
Explorer
54 0 12

How to bold and change colour navigation menu item. attached is the image of my homepage.

Below is my website link: www.snooze-store.com

Untitled.png

 

Thanks for your help.

Replies 6 (6)

foxdeveloper
Shopify Partner
19 4 6

Hey @Dom2306 , you can add the following CSS right at the bottom of your main CSS file (it should be named something like main.css, base.css or theme.css. Send me a screenshot of your code base assets folder if you can't find this 🙂

 

.top-header li.nav-item {
    font-weight: 600;
    color: your-hex-color-code-here;
}

 

 Alternatively, of you want to change the color only on the nav element hover, you can use the following CSS

.top-header li.nav-item:hover {
    color: your-hex-color-code-here;
}

 Let me know how it goes for you!

 

Best,

Alex

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


Dom2306
Explorer
54 0 12

Hi would like to bold and change the color to red for my 11.11 sale text only. How should the code be? Thank you.

foxdeveloper
Shopify Partner
19 4 6

Hey @Dom2306 , please add the following CSS in your assets > theme.min.css (right at the bottom!)🙂

 

 

a[href="/collections/1111sale"].nav-link.list-menu__item {
    font-weight:600;
    color:red!important;
}

 

 

Please don't forget to Like and Mark Solution if this post helped you.

We turn coffee into code (and Shopify Magic!) and we savour your support, if you found this solution helpful, you can help keep us caffeinated here

Thanks!
Need a knowledgeable developer? Come and visit us at
https://shopifoxdeveloper.com


ZestardTech
Shopify Partner
6071 1087 1458

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.min.css and paste this at the Bottom of the file:

 

a.nav-link {
font-weight: bold!important;
color:000!important;
}
summary.nav-link.dropdown-menu-item {
font-weight: bold!important;
color:000!important;
}

 

ZestardTech_0-1699516778571.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Dom2306
Explorer
54 0 12

Hi would like to bold and change the color to red for my 11.11 sale text only. How should the code be? Thank you.

PageFly-Oliver
Shopify Partner
878 190 185

Hi @Dom2306 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
a.nav-link {
font-weight: bold!important;
color:000!important;
}
summary.nav-link.dropdown-menu-item {
font-weight: bold!important;
color:000!important;
}
#main-slider-template--16233795780770__69927dcd-174f-446e-ab14-a58261efb41b .yv-banner-item:first-child .yv-banner-title{
color:red
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.