Change Menu Background Color

This topic has 8 replies, 2 voices, and was last updated 5 years, 4 months ago by tikaram.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
February 9, 2019 at 10:17 am #165473

Andrew
Participant

Hello,

I’ve tried just about everything in the Theme Color Customization tab. I want a black background on the menu dropdowns. Currently they’re white and washing out the white text color of the menu.

Here is my site URL: http://www.edgewithandy.com/

February 10, 2019 at 6:08 am #165515
tikaram
Participant
@edgewithandy : Go to Appearance => customize => Additional css and add the following css. Let me know if this helps you out
```
.navigation-classic .main-navigation ul ul {
	background-color: #000;
}
```
Regards,
Tikaram
February 10, 2019 at 10:42 am #165528

Andrew
Participant

That did the trick! thank you.

February 16, 2019 at 11:22 am #165997

Andrew
Participant

Your code fixed the web version but not the mobile version. Do you have a code that would also change the background color of the menu on mobile devices?

February 17, 2019 at 11:17 pm #166071

tikaram
Participant

@edgewithandy :I checked your site on mobile device as well. I don’t seem to find any issue with the mobile version as well. Please try clearing cache at your end and let me know.

Regards,
Tikaram

July 9, 2019 at 12:07 pm #176712

Andrew
Participant

I would like to use a dark header image as shown on my website with white menu text and white background color. However, when I change the site background color to white.. the navigation menu background is also white. You gave me a code which changed the white navigation background to black on desktop… however, the navigation menu color is still white on mobile device.

Apple iPhone 8 Plus using Chrome & Edge both show white.

This causes the white menu text so not be seen as it’s also white.

Can you provide a fix? see edgewithandy.com

July 10, 2019 at 12:45 am #176771
tikaram
Participant
@edgewithandy : Login to your WordPress admin
Go to Appearance => Customize => Additional css and add the following css
```
@media only screen and (max-width: 1200px) {
	.menu-inside-wrapper {
		background-color: #000000;
	}
}
```
Let me know if this resolves your issue.

Regards,
Tikaram
July 10, 2019 at 11:10 am #176808

Andrew
Participant

Yes that worked! thank you.

This is what my current Custom CSS looks like. Is this ok? or is there a cleaner way to write this overall code? Just want to be sure it’s the way it should be now…

.navigation-classic .main-navigation ul ul {
background-color: #000;
}

@media only screen and (max-width: 1200px) {
.menu-inside-wrapper {
background-color: #000000;
}
}

July 11, 2019 at 12:29 am #176840

tikaram
Participant

@edgewithandy : It looks fine. Let me know if you have any more issues.

Regards,
Tikaram
Author

Posts