Menu Background Turns White on Mobile

theauditgroup · April 2020

Hello, I am using the header builder for my menu and it works great on desktop. However, when on mobile the background turns white making the menu items unreadable since they are in white. Please help, I plan on launching this in two days. Here is my site: http://testsite.theauditgroup.com/

Pablo · April 2020

Hello,

You can change the "Submenu" menu color in the MHB, just edit the "Menu" item and get into the "style" tab

Thanks

theauditgroup · April 2020

It already was:

theauditgroup · April 2020

What else can I try?

theauditgroup · April 2020

I figured out that I need to add background color to this line of CSS: <ul
id="menu-main-menu-3" class="menu" style="display:
block;">

Can you point me to the place where this CSS is?

Pablo · April 2020

Your "Background color" of the submenu is just a light opacity.

Can you change it to be solid black?

Thanks

theauditgroup · April 2020

When I do that the entire header changes to that color - not the drop down. No options you provide will change the drop down color. I had to change my design and recolor the text, which doesn't look great.

Pablo · April 2020

How? I changed the submenu background color and only the submenu changed, see the screens:

https://prnt.sc/rul0h3

https://prnt.sc/rul0x8

Are you sure that you edited the "Menu" item?

https://prnt.sc/rul1aa

Thanks

theauditgroup · April 2020

The issue is on mobile only as mentioned earlier. The submenu option only changes the backgound of the submenu on mobile - not the main menu. There is no option to change the background of the main menu on mobile so it defaults to white. .

Pablo · April 2020

Okay, I do understand now.

Please paste that CSS code into the Theme Options > Custom CSS & JS > CSS

@media(max-width:768px){
	.menu{
		background-color:orange !important;
	}
	
	.sub-menu{
		background-color:red !important;
	}
}

Thanks

theauditgroup · April 2020

Awesome! Thank you.

Menu Background Turns White on Mobile

Comments