Hey there - anyone familiar with the Emerge theme?
I changed my body background to an image vs a solid color by adding some css. On desktop my header / nav menu is a solid color by choice, the fly out menus work and look great.
For some reason when it goes to the mobile version, the navigation drawer menu background is transparent. I believe this is because I deleted the color in theme settings to allow my CSS background code to take over.
How can I add some CSS to bring background color back to the mobile draw nav menu.
Hello @jasonmag ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets folder → base.css file → add this following code at the bottom of page
@media (max-width: 767px) {
.mobile-nav {
background-color: #your-color-code;
}
}
Save and preview
Hope this can help. Let us know if you need any further support.
Ali Reviews team.
not seeing a base.css file but tried to add to navigation.css and nothing
you can see the drawer here still transparent
unfortunately did not find a base.css file but found a navigation.css and tried that
did not work but you can see the drawer here being transparent still
Hi @jasonmag
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the theme–async.css file:
.drawer–instance {background: #ddd !important;} .y-menu–level-1–link {border-color: #bbb !important;}
Regards,
San
Thank you San that worked for the BG color! See attached thank you so much.
Now I see an issue where when I click on the Nav Link and open up a sub nav the text are overlaying each other. Is there another trick for this with a sub nav bg color?
Hi, @jasonmag .
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
@media (max-width: 767px) {
div#menu-drawer {
background: #000 !important;
}
.list-menu__item {
color: #ffff !important;
}
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
