Solved

Mobile Menu Text Colour Change

Toptoys2uHS
Explorer
87 1 9

Hello All,

 

I am trying to change the text colour on certain menu items for the mobile navigation menu, but unfortunately I cannot seem to find the correct element to select in order for this to change.

 

Toptoys2uHS_0-1713949499714.png

 

.mobile-menu__section a[href="/collections/hot-deals"] {
  color: #ef4a38;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}    

.mobile-menu__section a[href="/collections/clearance"] {
    color: #F2E90F;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}  

.mobile-menu__section a[href="collections/bargain-bundle-boxes"] {
    color: #02f2ed;
  font-weight: bold;
text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f;
}

 

Could anyone explain why the "Hot Deals" CSS works and not the other lines of CSS?

 

The website can be found here: https://toptoys2u.co.uk/

 

I appreciate any help!

 

Accepted Solution (1)
Raj-WebDesigne
Shopify Partner
60 16 14

This is an accepted solution.

It seems to have fixed this line with a[href="/collections/bargain-bundle-boxes"], but the line with a[href="/collections/clearance"] does not have customised text colour.

Because This Not Href attribute not on your class That's Why your css not accept color 
add This css 


.mobile-menu__section a[href="/collections/hot-deals"] {
  color: #ef4a38;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}    

.mobile-menu__section a[href="/collections/clearance"],ul.mobile-menu__nav li.mobile-menu__nav-item:last-child button.mobile-menu__nav-link {
    color: #F2E90F;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}  

.mobile-menu__section a[href="/collections/bargain-bundle-boxes"] {
    color: #02f2ed;
  font-weight: bold;
text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f;
}



If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 5 (5)

Raj-WebDesigne
Shopify Partner
60 16 14

Add This Css In your css

.mobile-menu__section a[href="/collections/hot-deals"] {
  color: #ef4a38;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}    

.mobile-menu__section a[href="/collections/clearance"] {
    color: #F2E90F;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}  

.mobile-menu__section a[href="/collections/bargain-bundle-boxes"] {
    color: #02f2ed;
  font-weight: bold;
text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Toptoys2uHS
Explorer
87 1 9

Hello @Raj-WebDesigne 

 

Thank you for your help on this issue. 

 

It seems to have fixed this line with a[href="/collections/bargain-bundle-boxes"], but the line with a[href="/collections/clearance"] does not have customised text colour.

 

Would you happen to know what the issue with this is?

 

Kind Regards

Raj-WebDesigne
Shopify Partner
60 16 14

This is an accepted solution.

It seems to have fixed this line with a[href="/collections/bargain-bundle-boxes"], but the line with a[href="/collections/clearance"] does not have customised text colour.

Because This Not Href attribute not on your class That's Why your css not accept color 
add This css 


.mobile-menu__section a[href="/collections/hot-deals"] {
  color: #ef4a38;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}    

.mobile-menu__section a[href="/collections/clearance"],ul.mobile-menu__nav li.mobile-menu__nav-item:last-child button.mobile-menu__nav-link {
    color: #F2E90F;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000;
}  

.mobile-menu__section a[href="/collections/bargain-bundle-boxes"] {
    color: #02f2ed;
  font-weight: bold;
text-shadow: 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 1px 1px 2px #000000, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f, 3px 4px 2px #ff034f;
}



If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Dawood_Mirza_
Excursionist
58 10 19

Hi Toptoys2uHS

You are facing this problem because the Hot Deals element was a <a href> element
and others are all <button> elements 

Even if you change the css for button element it would be applied to all since all buttons have same class
To Solve this 
You need to change all button elements to simple links and this would solve your problems

 

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
Dawood_Mirza_
Excursionist
58 10 19

new arrivals, top sellers, bargain bundles and tops deals are already link( <a href> ) change others then add this css for all.

 

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.