Add background color to menu

Hi,

I wanted to follow this advice

http://docs.athemes.com/article/213-add-background-color-to-menu-for-default-state

but am unable to locate > Customize > Additional CSS.

Can you help me get there? I am working with german language, so I cannot find “Customize” in the Dashboard menu …

Sorry!

Hello there,

The customizer panel also can be accessed through the Appearance menu where you can manage themes. Please read the codex.

Regards,
Kharis

Great, that worked!

However, on the pages, whenever I start scrolling down, the menu Background changes from blue to black. Is there a way to make it stay blue? Would i have to customize that in the coler secition? And if yes, what would be the color code?

Hello there,

You can use this code:


.site-header.float-header {
   background-color: rgba(72, 181, 206, 0.6);  
}  

Regards,
Kharis

ok, great! Now this is my last question: is it possible to make it non-transparent?

Indeed, it’s possible. To make it solid, you have to change the alpha value 0.6 to 1. So the code will look like this:


.site-header.float-header {
   background-color: rgba(72, 181, 206, 1);  
}  

Or if you want different color, you can use this:


.site-header.float-header {
   background-color: #ff0000;  
}  

Regards,
Kharis

Hello Kharis,

thanks, it is an improvement, but there is still a section while Scrolling, where the Header is transparent. you can check it here:

https://lsvdummy.lima-city.de/?page_id=65

Is there any way to make the header menu Background solid on all pages including homepage?

btw: will the custom CSS-codes be affected by future updates of the theme or will they stay?

Hello there,

Please add this code:


.site-header {
   background-color: rgba(72, 181, 206, 1);
}

The CSS code which is stored in the theme’s additional CSS option, which is under the Appearance > Customize > Additional CSS will always remain after theme update.

Regards,
Kharis

Hi Kharis,

yes, that did it!

Is it okay if i have just added all the css or shoul I have replaced it? Now my css reads:

.button-slider {
margin-top: 80px;
}.site-header {
background-color: rgba(72, 181, 206, 0.6);
}.site-header.float-header {
background-color: rgba(72, 181, 206, 0.6);
}.site-header.float-header {
background-color: rgba(72, 181, 206, 1);
}.site-header {
background-color: rgba(72, 181, 206, 1);

Is that ok?

Funny thing is: If I only use the last bit of css you sent me, there is still a minimal Portion of the site (one scroll click) where the menus is transparent. Only when I use all of the code it seem to work perfectly …

Hello there,

Please avoid code duplication for better readability. So it should look like this:


.button-slider {
 margin-top: 80px;
}

.site-header,
.site-header.float-header {
  background-color: rgba(72, 181, 206, 1);
}

Regards,
Kharis

Thanks, topic has been resolved!

You’re welcome and best wishes!