Change Specific Menu Item Colour for Mobile

Store Design
, , ,
1

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.

Toptoys2uHS_0-1707817776236.png
Toptoys2uHS_0-1707817776236.png401×859 54.8 KB

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!

2

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

3

Hi @PaulMartin_1

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

4

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;
}    
}
1 Like
5

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.

Toptoys2uHS_0-1707819184772.png
Toptoys2uHS_0-1707819184772.png435×886 47.5 KB

Thank you for your help once again.

6

Hey @Toptoys2uHS Sure I can explain you.

On the desktop view the code for clearance is like "Clearance. 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 “Clearance” 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