Customizing mobile dropdown menu canopy theme

Solved
New Member
4 0 0

Can anyone help me with customising menu drawer on mobile view?
I would like to change the colors and styles for this menu on mobile view in Canopy.
Currently the menu background is in gray and white with blue letters.
I will be grateful for your help.

 

The Silver Brand _ Customize Canopy _ Shopify-page-001.jpg

0 Likes

Hello thesilverbrand,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0
Hello, thanks for your prompt reply.
Here is my website url: https://thesilverbrand.com/

Best regards,
Georgi Georgiev

0 Likes

This is an accepted solution.

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->styles.css.liquid

#mobile-nav .mobile-nav-menu a.nav-item-link {
    color: white;
}
#mobile-nav .mobile-nav-menu {
    background-color: black;
}


Change the color as per your choice.
Hope this will work for you.
Thanks....

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0

Thank you very much! It works!

But in the bottom and top section where 'search bar', 'log in' and 'create an account' are located, the color of the background is still in gray.
I think there should be additional css code to add.
 
Thanks in advance!
0 Likes

This is an accepted solution.

Add this css

#mobile-nav .search-form input {
    color: white;
    background-color: red !important;
}
#mobile-nav .nav-item--lower {
    color: white;
    background-color: red !important;
}
nav#mobile-nav {
    background-color: red !important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0

Thank you very much!

0 Likes