Shopify themes, liquid, logos, and UX
Hi, I have managed to change the mobile menu text and main menu colours but can not change the sub-menu colour. I entered the following text which I found on the forum but it doesn't work and attached an image of my assets/component-menu-drawer.css.
.menu-drawer {background-color: #fff !important;}
.menu-drawer .link--text {color: #34675c !important;}
.js .menu-drawer__submenu {background-color: #fff !important;}
Any help would be appreciated.
Thanks
Solved! Go to the solution
This is an accepted solution.
Hello @lollypoplane
Go to online store ----> themes ----> actions ----> edit code---->assets---->buddha-megamenu2.css
add this code at the end of the file.
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition>li
{
background-color: #fff !important;
}
.vertical-mega-menu ul.mm-submenu,
{
color: #34675c !important;
}
.vertical-mega-menu ul.mm-submenu>li.mm-hovering>a[onclick]:not([data-href='no-link'])
{
color: #34675c !important;
}
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition>li>a>.toggle-menu-btn>.mm-cross {
background-color: #fff !important;
}
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition>li>.mm-submenu.height-transition {
background-color: #fff !important;
}
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition {
background-color: #fff !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
This is an accepted solution.
Please share your store URL and password.So that I will check and let you know the exact solution here.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
Hi,
I still have the same colour and unable to change it?
Only the color right? the code is conflict it have another color before which is pink. If you can find it and change it by there then its good. If not try this code below.
if you can look and change this one. It in the component-menu-drawer.css.
If you can't find it try to add this on the theme.liquid. before the </body> tag.
<style>
@media screen and (max-width: 749px) {
@media screen and (max-width: 749px) {
div#menu-drawer a.menu-drawer__menu-item {
color:#34675c !important;
}
}
</style>
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi Made4uo-Ribe
This has changed the text colour, not the background colour. Any thoughts?
Lollypoplane
hello @lollypoplane
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> base.css...>
add the code end of the file
.menu-drawer__inner-submenu .list-menu__item {
color: #34675c;
}
Buy me a Pizza
If this was helpful, hit the like button and accept the solution.
Thanks
This is an accepted solution.
Hello @lollypoplane
Go to online store ----> themes ----> actions ----> edit code---->assets---->buddha-megamenu2.css
add this code at the end of the file.
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition>li
{
background-color: #fff !important;
}
.vertical-mega-menu ul.mm-submenu,
{
color: #34675c !important;
}
.vertical-mega-menu ul.mm-submenu>li.mm-hovering>a[onclick]:not([data-href='no-link'])
{
color: #34675c !important;
}
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition>li>a>.toggle-menu-btn>.mm-cross {
background-color: #fff !important;
}
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition>li>.mm-submenu.height-transition {
background-color: #fff !important;
}
.vertical-mega-menu>.buddha-menu-item>.mm-submenu.height-transition {
background-color: #fff !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi Rahul_dhiman,
Thanks for helping but I can not see buddha-megamenu2.css in my assets?
Lollypoplane
Okay, so please search file ---> Assets ---> component-mega-menu.css
and add the given code in the end and save.
This is an accepted solution.
Hi Rahul_dhiman,
Perfect, thank you.
Lollypoplane
Thanks, please accept my solution and hit the like button.
also, if you can buy me a pizza for my work.
Thank you.
by mistake you have accepted your reply.
you need to accept my reply in which i sent you code.
I struggled with this for HOURS trying so many people's recommendations, so happy to have found your solution, eternal thanks!!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024