[RichaardChubb]

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

 

[Sakin]

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

[RichaardChubb]

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?

[Sakin]

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