Mobile Menu Text Colour Change

[Toptoys2uHS]

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.

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

[Raj-WebDesigne]

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

[Toptoys2uHS]

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

[Dawood_Mirza_]

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

[Dawood_Mirza_]

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