Change the color of a single menu item in the impulse theme

gennypoteet
Visitor
1 0 1

https://selecttrendsboutique.com/ 

I want to change the main menu item Holiday to red and bold. I used the impulse theme. I would like to do this for both mobile and desktop. 

Replies 2 (2)

ZestardTech
Shopify Expert
5393 971 1293
Hello There,
 
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the Bottom of the file:
 

 

#SiteHeader>div.page-width>div>div.header-item.header-item--navigation>ul>li:nth-child(3)>a, #Label-collections-holiday3{
font-weight: bold;
}

 

 

ZestardTech_0-1699420336633.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

BSS-Commerce
Shopify Expert
3465 460 515

Hi @gennypoteet ,

 

Copy this code into the js file on your theme:

<!-- desktop -->
$('.site-nav.site-navigation.small--hide > li:nth-child(3) > ul > li > a').css({
    'background-color': 'red',
    'font-weight': 'bold'
  });

$('.site-nav.site-navigation.small--hide > li:nth-child(3) > ul').css({
    'background-color': 'red',
  });

  <!-- mobile -->

$('.mobile-nav.mobile-nav--heading-style > li:nth-child(3) > div#Linklist-collections-holiday3').css({
    'background-color': 'red',
  });

$('.mobile-nav.mobile-nav--heading-style > li:nth-child(3) > div#Linklist-collections-holiday3 ul li a').css({
    'font-weight': 'bold'
  });

 Hope it helps @gennypoteet 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development