Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to Change The Color Of A Single Main Menu Item i.e Sale

Solved

How to Change The Color Of A Single Main Menu Item i.e Sale

lesriches
Excursionist
30 0 10

Hi,

I am trying to change the color of a single main menu item, i.e., Sale  to red

i have used following code in theme.css 

Theme : Warehouse


#HeaderMenu-Sale > span {
color: #ff9900 !important;
}
a.header__menu-item.header__menu-item--top.list-menu__item.focus-inset[href="/collections/Sale"] > span.label {
color: orange !important;
}
a[href="https://lesriches.co.uk/collections/sale"] {
color: red;
}

lesriches_0-1723562179447.png

 

Accepted Solutions (2)

BSS-TekLabs
Shopify Partner
2350 688 810

This is an accepted solution.

- Here is the solution for you @lesriches 
- Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.nav-bar__linklist .nav-bar__item:nth-child(9) {
 color: red !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1723562995670.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

niraj_patel
Shopify Partner
2378 514 507

This is an accepted solution.

Hello @lesriches 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   ul.list--unstyled li.nav-bar__item:nth-child(9) a {
      color: red !important;
   }
</style>

niraj_patel_0-1723563151762.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 5 (5)

BSS-TekLabs
Shopify Partner
2350 688 810

Hello @lesriches 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lesriches
Excursionist
30 0 10

https://lesriches.co.uk/
Password : admin@les

BSS-TekLabs
Shopify Partner
2350 688 810

I have commented the solution below. you can try it @lesriches .

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSS-TekLabs
Shopify Partner
2350 688 810

This is an accepted solution.

- Here is the solution for you @lesriches 
- Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.nav-bar__linklist .nav-bar__item:nth-child(9) {
 color: red !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1723562995670.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

niraj_patel
Shopify Partner
2378 514 507

This is an accepted solution.

Hello @lesriches 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   ul.list--unstyled li.nav-bar__item:nth-child(9) a {
      color: red !important;
   }
</style>

niraj_patel_0-1723563151762.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com