How can I change the hover color of a specific menu item?

Store Design

Topic summary

A user seeks to change the hover color of a specific menu item (“SALE”) on their Shopify store.

A PageFly representative provides a CSS solution:

  • Navigate to Online Store → Theme → Edit code
  • Add custom CSS targeting the specific menu item using nth-child selectors
  • The code snippet targets the fourth list item and applies a red hover color

The original poster confirms the solution works but asks how to style the active page state instead of just hover. The representative responds with additional CSS code using an href attribute selector to target the active menu item.

A second user joins asking related questions:

  • How to make “sale” permanently red on desktop and mobile
  • How to change the “Add to Cart” button background color
  • How to fix alignment of three product page segments currently centered but desired left-aligned

These follow-up questions remain unanswered. The discussion demonstrates a common Shopify theme customization workflow using CSS code injections.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like to change hover color of specific item on my store. I don’t know if there is a way to do it so I would love someone to help me. I want to change hover color of the “SALE” menu item. www.luxur-looks.myshopify.com pass:luxurlooks

2

Hi @noapaxx ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

ul.list-menu.list-menu--inline > li:nth-child(4) > a:hover {
    color: red !important;
}

Note: You can change the color value to match your store

Hope my answer will help you.

Best regards,

Victor | PageFly

3

@PageFly-Victor Thanks, this helped. One more thing, how to do this for active page? Changing :hover to :active doesn’t work.

4

Hi @noapaxx , You can try this code:

a[href="/collections/sale"] > span.header__active-menu-item {
    color: red !important
}
5

Hello, can you please tell me how can I make the “sale” in permanent red on desktop and mobile?

Is there a way to change the background color of “add to cart” button on product pages?

Also, in the product page, I have 3 segments which are showing in the middle of the page but I want them left aligned, how can I fix that? Please see attached.

Thanks in advance.