Add a background color to mobile only menu BROADCAST THEME

Store Design
1

Hello,

I apologize in advance, if this question has been asked before.

I looked for it and asked the team from BROADCAST but I guess they don’t help out with individual code changes. I would like to add a dropdown background color on the mobile version of my shop maotajp.myshopify.com

I attached a screenshot for mobile and desktop versions. Since the menu can’t be seen on mobile after clicking (once you hover you can see it), I would like to add a dropdown or background (I am not sure which words are correct) to the mobile version only. The desktop is fine as it is.

I tried to insert this code from another post I saw, but it won’t change anything. The color I want to add to the background is #FCFAF1.

Thank you in advance.

@media only screen and (max-width: 768px) {

#navBar {
background-color: #FCFAF1;
}
#MobileNav .mobile-nav a {
color: #595045;
}
#MobileNav .mobile-nav–button::before {
color: #595045;
}
}

MOBILE VERSION
MOBILE VERSION770×1702 158 KB

DESKTOP VERSION
DESKTOP VERSION2072×1692 340 KB

2

hello @maota

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 729px){
.header-content a:hover, .main-menu-dropdown a:hover, .main-menu>li>a:hover {
    color: #000000 !important;
}
.site-nav.nav__links .main-menu.unstyled{
background: #FCFAF1;
}
}
3

Hi Natztech,

Thank you so much! It worked out perfectly. I was trying for weeks now.

Really appreciate it.

Cheers!