How can I highlight a specific menu item on my website?

Store Design
1

Hi,

This is Akshaya. I want to highlight a specific Manu item on my website https://happypique.in. I want it to be in dark green (#046307) colour. If possible some jumping effects? To show that it’s a new or hot collections menu. The menu I want to be highlighted is:

https://happypique.in/collections/exclusive-kerala-onam-jewellery-collection. Thanks in advance.

2

Hi @Happy_Pique :waving_hand: , To style a specific link use a CSS attribute selector targeting a links href attribute by putting the css in a shopifys themes custom css setting.

nav a[href*='exclusive-kerala-onam-jewellery-collection'] { color: #046307; }

“nav” makes it so it should only color that link in the menu and not everywhere on the site it may appear such as in a blog post, so if you want it to apply everywhere remove the “nav” selector.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

1 Like
3

Hello @Happy_Pique ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file → add this following code

.highlighted-menu-item {
  color: #046307;
}

Replace “.highlighted-menu-item” with the appropriate class or ID for the menu item you want to highlight

Save and preview

Hope this can help.

Transcy

4

Thank you so much. It worked well :+1: Can I know how to add the colour, #FFD700 as background and with text in emerald green?