Navigationbar transparant

Hi supportteam,

Is it possible to make the menu bar completely transparent?

Thank you in advance.

Kind regards, hendrik

Hi,

You can add this in Customize > Additional CSS:


.site-header {
    background-color: transparent !important;
}

Hi Vlad,

Thank you. The menubar is transparant when I scroll down. Is it possible to make the white bar in the picutre transparant as well?

Thank you in advance! :slight_smile:

Hi,

It is transparent but it is outside the image, that’s why you see it white.
You can add this:


#header-sticky-wrapper {
    width: 100%;
    position: absolute;
    z-index: 99;
}

Perfect! Thanks Vlad :slight_smile:

Hi Vlad, I think because the slider is now across the menubar, the contact pop up now too far above it. Because I can not see my whole form and can not see the close button.

See: www.staalbureau.nl

Thanks in advance

Use this please:


.contact-popup {
     display: block;
}
.icon-cancel {
     color: #333;
}

Some code to change the close button color too because I see you changed the overlay color.

Thank you ! :slight_smile:

Hi Vlad,
I changed the background of the Menu according to your code. Works fine. Only problem is, I wanted to go back to a white background. So, I deleted the CSS Code in the Customizer, but the Header is still transparent. How can I bring it back to a white background?

Or - even better - how can I make the Header semi-transparent white? Something with opacity:0,5 maybe?

Thank you.

Hi @TomDoe

If you’re sure you’ve deleted the code and it still shows, then you’re probably seeing cache, either from your browser or handled through a caching plugin. I would need to see your site.

This makes it 0.5:


.site-header {
    background-color: rgba(255,255,255,0.5) !important;
}

Thanky Vlad. Works fine. It obviously overruled the transparent settings.

One more thing, if not to much for the support: Would it be easily possible to have the header transparent first and when you scroll down it changes to opacity 0.5? Like in Astrid Theme? Or I think Sydney as well?

Yeah, just have to grab some of the code from the topic we’re on right now. This would be what’s needed:


#header-sticky-wrapper {
    width: 100%;
    position: absolute;
    z-index: 99;
}
.site-header {
	background-color: transparent !important;
	transition: background-color 0.4s;
}
.is-sticky .site-header {
	background-color: rgba(255,255,255,0.5) !important;
}

Awesome. Thanks again.

Is it possible to also remove the shadow around the header when it’s transparent?