opacity header

SvenMaesschalck · October 2018

Hello,

I need some assistance to change the opacity of the header (stack center). I want to change this header to semi transparent.

Is it possible to change this with css code because I tried

#Top_bar{

background-color:rgba(0,0,0,0.8) !important;

}

but that didn't work.

https://despeelerij.be/

Best regards,

Sven.

Pablo · October 2018

Hi,
This menu type is not very friendly for additional backgrounds.
It will look like this:
http://prntscr.com/l6zs2t
And even if I'll apply the background for the menu items, I wouldn't be able to remove these blank strips at left and right because javascript script will change the width of this menu and Custom CSS will be issued.

Are these left and right blank strips ok for you?
Cheers

SvenMaesschalck · October 2018

Hi,

I can change from menu type, that is not the problem. The thing is I want something to achieve like the website www.bij-jans.nl

This means a picture in the background and a menu that is semi transparent.

Best regards,

Sven.

Pablo · October 2018

The best for you will be a "Split Menu Semitransparent."
You won't have to change anything in CSS to make your menu semitransparent.

If you don't like this type of menu, change it to the one you like and
tell me, and I'll try to make a CSS for you.
Thanks.

SvenMaesschalck · October 2018

Hi,

i have tried "split menu semitransparent" but I don't like the split. Is it possible to do this with the current type of menu (stack center)?

Best regards,

Sven.

Pablo · October 2018

As I said, it's possible, but only with strips on left and right.


.menu_wrapper{
	background:rgba(0,0,0,.2);
}

.menu_wrapper .menu li{
	background:rgba(0,0,0,.2);
}

Paste it to Theme Options > Custom CSS & JS > CSS

Thanks

SvenMaesschalck · November 2018

Hello,

I followed your advice and I have used the option "split menu transparent". On desktop everything is looking ok but on a mobile phone there is a white space just underneath the banner. Is it possible to remove this white space?

Best regards,

Sven.

Pablo · November 2018

It's a subheader.

You can disable it in Theme Options > Header & Subheader > Subheader

and tick the "hide" to "subheader"

http://prntscr.com/lfsw49

Thanks

SvenMaesschalck · November 2018

Hello,

indeed there is a subheader and on desktop this subheader is transparent.

Can this also be the case on mobile? If not is there a possibility to hode this subheader but only on mobile?

Thanks.

Pablo · November 2018

This CSS will hide subheader only on mobile:

@media (max-width:787px){
	#Subheader{
		display:none !important;
	}
}

Thanks

SvenMaesschalck · December 2018

Hello,

I still have a problem with the combination logo and the selected menu.

On desktop everything is fine, there is a white semi transparent menu with in the middle the logo.

On mobile there is another mobile menu (this is logic because of the width) but because of that there is no white background anymore. So the visibility of the logo isn't very good.

So My question is: is there a possibility to add a semi transparent banner behind the logo on a mobile device?

Best regards.

Pablo · December 2018

Please use this CSS:

@media (max-width:767px){
	.header-split #Header .top_bar_left, .header-split #Header .top_bar_right{
		background-color:rgba(255,255,255,0.8) !important;
    padding-top:35px !important;
	}
}

Thanks

opacity header

Comments