Shopify themes, liquid, logos, and UX
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:
I appreciate any help!
Solved! Go to the solution
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;
}
}
It would be helpful if you could attach your site so that we can take a closer look at it.
Hi @PaulMartin
Thank you for your reply.
I have now updated the post and will add the link to the website here:
Kind Regards
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;
}
}
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.
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
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024