Shopify themes, liquid, logos, and UX
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
Thanks for your help.
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
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.
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;
}
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;
}
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.
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025