Change color of one item in main menu to red (Impulse Theme)

Topic summary

Main issue: highlight a single main‑menu item (e.g., SALE/SUPERSALE) in red on the Shopify Impulse theme.

Working approaches (confirmed by store owners):

  • Add CSS in Assets (theme.scss.liquid or theme.css) and, if needed, place it at the top for stronger precedence.
    • Link‑targeted: a[href=“/collections/super-sale”] or a[href=“/collections/sale”] { color: #ff0000 !important; }
    • Position‑based (desktop): selectors like .header-item–split-left ul li:nth-child(2) a or .site-nav__expanded-item:last-child a { color: red !important; }
    • Mobile menu uses different markup: target IDs/classes such as a#Label-collections-sale7 or li.mobile-nav__item .appear-animation.appear-delay-3 a { color: red !important; } optionally inside an existing @media (max-width: 749px) block.

Outcomes:

  • frontiers-woman.com: desktop fixed by moving CSS to top; mobile solved with a#Label-collections-sale7.
  • bsoleful.com: desktop and mobile both resolved using nth-child and mobile selectors.

Ongoing/pending:

  • New requests (otanto.de, inimigo.com, frontiers-woman.com after menu change, custom ribbon/blinking, bold/red “Gift Guide”). Tailored selectors per site structure are needed.
  • Variant/swatch question received only high‑level guidance (add color swatches); no detailed solution provided.

Status: multiple individual fixes achieved; thread remains open for additional site‑specific help.

Summarized with AI on December 14. AI used: gpt-5.

Hi Guys,

I’m using the impulse theme, and I wanted to change one item’s color to red in the main menu. I tried the ways in the forum already, but they didn’t work. So I’m wondering if anyone know how to deal with it. My website is planetlinen.com.au. The item I want to change is the SUPERSALE

For that, I need to analyze your website and then I can provide any solution over here.

So Please provide website URL and if your store is password protected then also provide password

Hello marky1,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css

header#SiteHeader a[href="/collections/super-sale"] {
    color: red !important;
}

Please place this code at the end of Assets → theme.scss.liquid file

a[href="/collections/super-sale"]  {
color: #ff0000 !important;
}
1 Like

Dear @marky1

  1. From your Shopify admin, go to Online Store > themes.
  2. Locate your current theme and then click Actions > Edit code.
  3. After that in the Assets folder, click to open your theme.scss.liquid file.
  4. Go to the very bottom of this file and paste the following code:
/* Start */
#SiteHeader > div.page-width > div.text-center > ul > li:nth-child(8) a { color: white; background: red !important; }
/* End*/
  • Save and check your theme by refreshing it.

Have you solved this problem?

Hi,

Did you ever find a solution to this? None of the replies below worked for me.

Thanks

Mark

@Mark118

I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

Hi HardikDavra,

Thank you for your reply.

My site is frontiers-woman.com

Thanks, Mark

@Mark118 which menu do you want to highlight?

The Sale menu - in red would be ideal!

Thanks

@Mark118

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

a[href="/collections/sale"] {
color: #ff0000 !important;
}
1 Like

Hi HardikDavra

I added the code - see below - but no change on the site…

Hello,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url with password (if it password protected) where you want to do modification, so that I will solve your issue here!

Hi there, thanks for your reply.

Store - frontiers-woman.com

I’m looking for the Sale menu on the nav bar to be in red.

Best,

Mark

li.site-nav__item.site-nav__expanded-item.site-nav--has-dropdown:last-child a {
    color: red;
}
.site-nav--has-dropdown:last-child a:hover {
    color: red !important;
}
a.site-nav__dropdown-link.site-nav__dropdown-link--second-level {
    color: #000 !important;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Hi,

I added that code but it doesn’t seem to work:-

Any ideas?

Many thanks, Mark

Add css at the top or in between

1 Like

Added it to the very top and it works perfectly - thanks very much.

Is there any way for it display in red on mobile view?

@media only screen and(max-width:749px){
a#Label-collections-sale7 {
    color: red;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid