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

[marky1]

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

[Hardik29418]

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

[oscprofessional]

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;
}

[Ricardo25]

Hi

Can you help me? 
I want to change the last word from my header "Archive", I have already tried the codes that you post but no one works correctly for my case. Thank you in advance!

My website is https://inimigo.com/

Best regards,
Ricardo Miranda

[eco_intimates]

Hi, Could you help me adding this code to my menu too? I would like the first word (in this case Gift Guide) both bold and colour red.

My site is www.ecointimates.com.au

[Hardik29418]

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

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

[MS-WEB-DESIGNER]

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.

[EllaBrown2021]

Have you solved this problem?

[Mark118]

Hi,

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

Thanks

Mark

[Hardik29418]

@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.

[Mark118]

Hi HardikDavra,

Thank you for your reply. 

My site is frontiers-woman.com  

Thanks, Mark

[Hardik29418]

@Mark118  which menu do you want to highlight?

[Mark118]

The Sale menu - in red would be ideal!

Thanks

[Hardik29418]

@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;
}

[Mark118]

Hi HardikDavra

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

[oscprofessional]

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!

[Mark118]

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

[oscprofessional]

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

[Mark118]

Hi,

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

Any ideas?

Many thanks, Mark

[oscprofessional]

Add css at the top or in between

[Mark118]

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?

[oscprofessional]

@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

[Mark118]

Tried that at the top and bottom of the theme.css.liquid but no joy 😞 

[oscprofessional]

Now it is added?

[oscprofessional]

If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px ( already exist)

[oscprofessional]

do one thing

a#Label-collections-sale7 {
    color: red;
}

add this one in between

[Mark118]

Perfect!! Thank you very much - really appreciated.

[KCBF]

Hi There OCS - are you able to advise please?

We have the same issue on:

bsoleful.com

Just need to switch the SALE menu to red, and tried the earlier methods with no joy 😞

Thanks,
kcbf 

[oscprofessional]

Hi @KCBF ,

.header-item--split-left li.site-nav__item.site-nav__expanded-item:nth-child(2) a {
    color: red;
}

li.mobile-nav__item.appear-animation.appear-delay-3:nth-child(2) a {
    color: red;
}

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

[KCBF]

Hi There OSC,

I tried and it didn't make any difference unfortunately

[Zworthkey]

hii, @KCBF 
Paste this code on top of the theme.scss file.

.header-item.header-item--split-left ul li:nth-child(2) a {
    color: red !important;
}

Thank You.

[KCBF]

Brilliant, thank you!

Will see if I can make the mobile one red too following your previous instructions.

Appreciated 

[Zworthkey]

Hii @KCBF 

If it helpful then like and accept my solution. 

Thank you. 

[KCBF]

Hi There it didn't work unfortunately.

I now have desktop site SALE menu title in red, but not on mobile.

Help would be appreciated.

Thanks,

Keith

[Zworthkey]

@KCBF 
Kindly share your store URL.
Thank You.

[KCBF]

bsoleful.com

Thanks Zworthkey

[Zworthkey]

@KCBF 
paste this code on top of the theme.scss file.

li.mobile-nav__item.appear-animation.appear-delay-3 a {
    color: red !important;
}

Thank You.

[KCBF]

Brilliant Zworthkey - thanks so much for the help

Can you also help me with listing variants separately on collections pages, but linked together on product pages please????

i.e one shoe style has 3 colour options, and 6 size options.

To showcase all lines we need to have the colours show separately on collections pages, but now want all colours to be available on one product page when a customer clicks through.

I just can't  find a way to make this happen.

(Understand this may need me to start a separate forum post)

Thanks,

KCBF

[Zworthkey]

@KCBF 
Can you give me a screenshot of what you want.
Thank You.

[KCBF]

Hi There,

I can't give a screen shot, sorry - we don't have what I want!!

We have a style of shoe, e.g. Mista shown below in the collections page, where each colour is listed separately.

This is all good, as it shows our full range on the listings page.

However, when a customer clicks through to the product page, only one of the products shows:

I would like the product pages to show a swatch both colours, in this case Black and Pewter.

If i do this in the normal way of setting up products in SHopify, only one of the products will show in the listings page, not all.

So to show all I have them listed separately, but i need to combine the products and make it work so all colours show on the listings page, and in the product page there is a relevant swatch to give th customer the option of all colours available in that style.

guidance would be appreciated.

Thank you so much for taking the time to engage.

Thanks,

KCBF 

[Zworthkey]

Hey, you need to add color Swatches for your product.

[JWOtan]

Hi,

I would like to change also the SALE % button on navigation to red. 

Could you please assist me. 

The shop URL: otanto.de

Thanks

[Anderson10]

Hi Oscprofessional, you kindly helped me here in the past but I have added another menu item and the SALE is no longer displaying in red. If you could help out again that would be great! 

https://frontiers-woman.com/

Thanks in advance! 

[hxsagencies]

this work for me thanks can you please help me further i want it to blink

[Zworthkey]

hii, @marky1 
Add this code on top of the theme.scss file.

li.site-nav__item.site-nav__expanded-item:last-child a {
    color: red !important;
}

Thank You.

[Shazal]

I also have an issue, I just want to make the sale button on the nav menu Red and add a custom ribbon in front of it but i am unable to do so.