How to change colour of the mobile sub-menu. Dawn version 15.1.0

Store Design
1

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

2024-09-13 9.47.15 AM.jpeg
2024-09-13 9.47.15 AM.jpeg1242×1224 84.7 KB

2 Likes
2

@lollypoplane ,

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.

3

www.lollypoplane.co.uk

Milly

4

Hi @lollypoplane

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.

Made4uoRibe_0-1726218822549.png

If you can’t find it try to add this on the theme.liquid. before the tag.

And Save.

Result:

Made4uoRibe_1-1726218957319.png
Made4uoRibe_1-1726218957319.png553×612 17.7 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hi,

I still have the same colour and unable to change it?

6

Hi Made4uo-Ribe

This has changed the text colour, not the background colour. Any thoughts?

Lollypoplane

7

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

8.png
8.png444×832 21.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
8

Hi Rahul_dhiman,

Thanks for helping but I can not see buddha-megamenu2.css in my assets?

Lollypoplane

9

Okay, so please search file —> Assets —> component-mega-menu.css
and add the given code in the end and save.

10

Hi Rahul_dhiman,

Perfect, thank you.

Lollypoplane

1 Like
11

Thanks, please accept my solution and hit the like button.
also, if you can buy me a pizza for my work.
Thank you.

1 Like
12

by mistake you have accepted your reply.
you need to accept my reply in which i sent you code.

13

I struggled with this for HOURS trying so many people’s recommendations, so happy to have found your solution, eternal thanks!!

14

For those looking to change the Buddah Mega Menu mobile submenu background in Studio theme, I had to paste Rahul’s above code into assets/component-mega-menu.css at the very bottom and it worked. My website is https://mysticalrosegems.com