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!
Topic summary
Issue: In the Dawn theme, the mobile menu dropdown (menu drawer) appears transparent, making navigation text hard to read. The store URL was shared, and a screenshot clarified the problem occurs when the menu drops down on mobile.
Proposed fix: Add a solid background to the menu drawer via CSS. Specifically, set background-color: white on the .menu-drawer__navigation-container class in the theme’s CSS (e.g., base.css, style.css, or theme.css). Example guidance included adjusting the container’s existing rules to include the white background.
Validation/related: Another user with the Spotlight theme reported the same issue, initially couldn’t find the class, then located it and confirmed the fix works.
Notes: Screenshots were central to understanding that the issue affects the mobile dropdown, not the static header. One responder initially saw the header as already white.
Status: A clear CSS-based solution is provided and confirmed by another user; original poster has not yet confirmed implementation. Open item: none critical, aside from OP confirmation of success.
Hey @jthompson05
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
Hi @jthompson05
Can you please share store URL?
Hi! The URL is www.wildwestboutique.org. There is no password.
Thank you so much!
Is ther
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!
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.
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
Never mind, I found it and it works. Thank you!