Solved

Change Specific Menu Item Colour for Mobile

Toptoys2uHS
Explorer
83 1 9

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

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!

Accepted Solution (1)
Zeel-prajapatii
Shopify Partner
138 32 27

This is an 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;
}    
}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Replies 5 (5)

PaulMartin
Shopify Partner
193 34 61

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

Toptoys2uHS
Explorer
83 1 9

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
Shopify Partner
138 32 27

This is an 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;
}    
}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Toptoys2uHS
Explorer
83 1 9

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

 

 

Thank you for your help once again.

 

Zeel-prajapatii
Shopify Partner
138 32 27

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

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me