How can I adjust transparency in the Dawn Theme menu?

jthompson05
Visitor
3 0 0

Hi! I am in the process of setting up a new store with Dawn Theme. The navigation menu is transparent do you can’t read the categories. How can I change it to an opaque (white) background?

 

Thank you so much!  

Replies 8 (8)

Moeed
Shopify Partner
3793 958 1189

Hey @jthompson05 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
jthompson05
Visitor
3 0 0

Hi! The URL is www.wildwestboutique.org. There is no password. 
Thank you so much! 

laddisahsi
Shopify Partner
383 38 40

@jthompson05 

its white

laddisahsi_0-1695208501411.png

 

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
jthompson05
Visitor
3 0 0

Is ther

3FB25C0F-BDD8-4E09-9E12-0F12B2FFFAFB.jpeg

 Here is a screenshot. When the menu drops down, it is transparent. I would like it to be opaque so you can see it. Thank you! 

laddisahsi
Shopify Partner
383 38 40

Hi @jthompson05 

Can you please share store URL?

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

Anshul_arora
Navigator
371 104 72

Hello @jthompson05 ,

I understand that you are looking to implement a background colour in menu dropdown in mobile version https://prnt.sc/dD7ValKXMzvd

You can resolve this problem by making changes in the CSS of (.menu-drawer_navigation-container ) div class.

Please change the previous code with below mentioned code -:

.menu-drawer__navigation-container {
display: grid;
grid-template-rows: 1fr auto;
align-content: space-between;
overflow-y: auto;
height: 100%;
background-color: white;
}

You can review when the code changes, output will look like this https://prnt.sc/Q1t9ioc1XPDn

You can search this code in your .css file ( base.css/style.css/theme.css ) and change with the above mentioned code.

I hope this helps.

Please feel free to contact me if you need any assistance.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
FairLux
Visitor
2 0 0

Hello, Im having the same issue with the Spotlight theme. I cannot find the (.menu-drawer_navigation-container ) div class. 

the url for my website is www.fairlux.ca

FairLux
Visitor
2 0 0

Never mind, I found it and it works. Thank you!