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

Solved

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

lollypoplane
Tourist
7 1 3

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

Accepted Solutions (2)

Rahul_dhiman
Shopify Partner
606 119 121

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
8.png

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

View solution in original post

lollypoplane
Tourist
7 1 3

This is an accepted solution.

Hi Rahul_dhiman,

 

Perfect, thank you.

 

Lollypoplane

View solution in original post

Replies 13 (13)

dws_pvt_ltd
Shopify Partner
330 65 84

@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.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: [email protected].
For more information visit our website Dolphin Web Solution Pvt Ltd.
lollypoplane
Tourist
7 1 3
lollypoplane
Tourist
7 1 3

Hi,

 

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

Made4uo-Ribe
Shopify Partner
8776 2099 2574

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 </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:

Made4uoRibe_1-1726218957319.png

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
lollypoplane
Tourist
7 1 3

Hi Made4uo-Ribe

 

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

 

Lollypoplane

 

Sangeetanahar
Trailblazer
555 36 66

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;
}



aedcc2df-1d12-4cff-9ce1-d0a17a9ee4b9.png

Buy me a Pizza


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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here

Rahul_dhiman
Shopify Partner
606 119 121

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
8.png

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
lollypoplane
Tourist
7 1 3

Hi Rahul_dhiman,

 

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

 

Lollypoplane

Rahul_dhiman
Shopify Partner
606 119 121

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
lollypoplane
Tourist
7 1 3

This is an accepted solution.

Hi Rahul_dhiman,

 

Perfect, thank you.

 

Lollypoplane

Rahul_dhiman
Shopify Partner
606 119 121

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
Rahul_dhiman
Shopify Partner
606 119 121

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
shieldmaiden
Visitor
1 0 0

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