Change Specific Menu Item Colour for Mobile

[Toptoys2uHS]

Hello everyone.

I am currently trying to change the colour on a specific menu item for mobile, but cannot seem to get it to work for an item with dropdown options.

I have managed to change the colour of "Hot Deals" as it does not have a dropdown, but the "Clearance" button does not seem to change even after many variations of code which I thought would be the issue.

The code I have implemented currently which does not work is here:

li.mobile-menu__nav-link 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;
}    
}

Would anyone know how to change the colour of the text on "Clearance", or any of the dropdown menu items for example?

The website can be found here: 

https://toptoys2u.co.uk/

I appreciate any help!

[PaulMartin]

It would be helpful if you could attach your site so that we can take a closer look at it.

[Toptoys2uHS]

Hi @PaulMartin 

Thank you for your reply.

I have now updated the post and will add the link to the website here:

https://toptoys2u.co.uk/

Kind Regards

[Zeel-prajapatii · Accepted solution]

Hey @Toptoys2uHS please add the below code to theme.css file. 

@media screen and (max-width:749px){ 
.mobile-menu__nav button[aria-controls="mobile-panel-7"]{
  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;
}    
}

[Toptoys2uHS]

Hello @Zeel-prajapatii,

Thank you for your solution on this, it looks like it has worked.

Would you be able to explain why the "Hot Deals" was able to work with .mobile-menu__nav-item a[href="/collections/hot-deals"], but the "Clearance" was not able to work in the same way?

Also, the button for "Clearance" looks like it has changed colour as well.

Is there a way to keep it the same as the others, e.g. the dark grey.

Thank you for your help once again.

[Zeel-prajapatii]

Hey @Toptoys2uHS Sure I can explain you. 

On the desktop view the code for clearance is like "<a href="/collections/clearance" class="nav-bar__link link" data-type="menuitem" aria-expanded="false" aria-controls="desktop-menu-0-8" aria-haspopup="true">Clearance</a>. you can see anchor tag ("a") is used over there in desktop view , so your code is working there only.

But , if you check the mobile menu the desktop version code is no longer available there and there is a new code like "<button class="mobile-menu__nav-link" data-type="menuitem" aria-haspopup="true" aria-expanded="false" aria-controls="mobile-panel-7" data-action="open-panel">Clearance<svg focusable="false" class="icon icon--arrow-right " viewBox="0 0 8 12" role="presentation">" you can see a "button" tag used there , so I have just modified your code from "a" to "button" tag. 

Let me know if you have queries. 

Thanks

Zeel