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

marky1
Visitor
1 0 0

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

Replies 43 (43)

Hardik29418
Shopify Partner
2858 407 1073

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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

oscprofessional
Shopify Partner
15830 2369 3072

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Ricardo25
New Member
5 0 0

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

Hardik29418
Shopify Partner
2858 407 1073

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

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



- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

MS-WEB-DESIGNER
Shopify Partner
3012 181 484

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
Excursionist
92 0 9

Have you solved this problem?

banned

Mark118
Excursionist
55 0 4

Hi,

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

Thanks

Mark

Hardik29418
Shopify Partner
2858 407 1073

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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Mark118
Excursionist
55 0 4

Hi ,

Thank you for your reply. 

My site is frontiers-woman.com  

Thanks, Mark

 

Hardik29418
Shopify Partner
2858 407 1073

@Mark118  which menu do you want to highlight?

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Mark118
Excursionist
55 0 4

The Sale menu - in red would be ideal!

Thanks

Hardik29418
Shopify Partner
2858 407 1073

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

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Mark118
Excursionist
55 0 4

Hi HardikDavra

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

Mark118_0-1629451644818.png

 

oscprofessional
Shopify Partner
15830 2369 3072

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!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Mark118
Excursionist
55 0 4

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
Shopify Partner
15830 2369 3072

 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Mark118
Excursionist
55 0 4

Hi,

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

Mark118_0-1629458507425.png

 

Any ideas?

Many thanks, Mark

oscprofessional
Shopify Partner
15830 2369 3072

Add css at the top or in between

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Mark118
Excursionist
55 0 4

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
Shopify Partner
15830 2369 3072
@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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Mark118
Excursionist
55 0 4

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

oscprofessional
Shopify Partner
15830 2369 3072

Now it is added?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3072

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)

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3072

do one thing

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

 

add this one in between

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Mark118
Excursionist
55 0 4

Perfect!! Thank you very much - really appreciated.

KCBF
Tourist
7 0 1

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
Shopify Partner
15830 2369 3072

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
KCBF
Tourist
7 0 1

KCBF_0-1630680433499.png

Hi There OSC,

I tried and it didn't make any difference unfortunately

 

Zworthkey
Shopify Partner
5581 642 1565

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
Tourist
7 0 1

Brilliant, thank you!

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

Appreciated 

Zworthkey
Shopify Partner
5581 642 1565

Hii @KCBF 

If it helpful then like and accept my solution. 

Thank you. 

KCBF
Tourist
7 0 1

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
Shopify Partner
5581 642 1565

@KCBF 
Kindly share your store URL.
Thank You.

KCBF
Tourist
7 0 1

bsoleful.com

 

Thanks Zworthkey

Zworthkey
Shopify Partner
5581 642 1565

@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
Tourist
7 0 1

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
Shopify Partner
5581 642 1565

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

KCBF
Tourist
7 0 1

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.

KCBF_0-1630926185221.png

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

KCBF_1-1630926284256.png

 

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
Shopify Partner
5581 642 1565

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

JWOtan
New Member
7 0 0

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
Excursionist
29 0 8

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! 

Zworthkey
Shopify Partner
5581 642 1565

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
Visitor
1 0 0

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.