Menu Background

This topic has 3 replies, 2 voices, and was last updated 1 year, 8 months ago by Sakin.

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

Author

Posts
March 16, 2023 at 8:29 am #316555

RichaardChubb
Participant

Hi,

I have trawled through all the options, but I can not seem to find out where I can add a background colour to the menu on the home page, instead of it being transparent.

http://www.richardchubb.com

Thanks, Richard

March 16, 2023 at 11:31 am #316562
Sakin
Keymaster
Hi Richard,

If you want to change the Background color of the header section then change the color code in the following CSS and then add it in the “Appearance => Customize => Additional CSS” box:
```
/* Change Header Background Color */
.absolute-header .site-header {
	background-color: #000;
}
```
But if you just want to change the Background color of the header menu section then use the following CSS instead of the above CSS:
```
/* Change Header Menu Area Background Color */
.absolute-header .site-header-menu {
	background-color: #000;
}
```
Note: You can check color codes at https://htmlcolorcodes.com/

Regards,
Sakin
March 16, 2023 at 6:40 pm #316572

RichaardChubb
Participant

The first one is what i was looking for, thank you. Can I make the header area thinner, so the padding around the words isn’t as bit?

March 16, 2023 at 6:46 pm #316574
Sakin
Keymaster
Hi Richard,

Yes, you can add the following CSS
```
.navigation-classic .site-branding {
  margin-top: 0;
  margin-bottom: 0;
}
```
If you further want to reduce more then add the following CSS as well:
```
.site-header-main .wrapper {
  padding-top: 0;
  padding-bottom: 0;
}
```
Regards,
Sakin
Author

Posts