Transparent header using GeneratePress and Beaver Builder

Hi Tony,

This topic might help: https://generatepress.com/forums/topic/need-help-with-transparent-menu-with-beaver-builder/

Let me know :)

Hi Tom,

Yes, I did read and try the info on that page before writing but the code that you suggest only changes the navigation bar to a white bar (or makes it invisible). I suspect that it might be because I have the navigation bar set to "Above Header" and I don't know how to put it inside the header.

regards,

Tony

I'm guessing it might be through the inside header GP Hook, but I don't know what to put there to make the navigation bar appear there. I tried using the header widget and putting my main menu there as a custom menu but it just created another header-sized space with nothing in it.

Regards,

Tony

Hi Tony,

Typically for this kind of layout you want your navigation floating right (Customize > Layout > Primary Navigation > Navigation Position).

Hi Tom,

Thanks. I just tried that and it moved my previously centered menu items to the right (the text is white but I can just see them to see that they are there and transparent). The problem is that the main hero image that they are supposed to be over won't go behind them but remains just below, no matter the margin settings being at zero.

It's so close to working, I'm sure it's just some other setting that I've (mis)used.

You can see it at my test site: http://trmainshell.com/

Regards,

Tony

Can you link me to that page?

Here you go: http://trmainshell.com/

Try adding the CSS using a plugin like this: https://wordpress.org/plugins/simple-css/

Thanks Tom, no difference.

The code I'm using is:

site-header {
position: absolute;
width: 100%;
left: 0;
z-index: 500;
}

#site-navigation,
#site-navigation .main-nav li a {
background: transparent;
}

You're missing the period before site-header.

It should be: .site-header

Sorry, that was a typo cut and paste in this thread, the period is in the Simple CSS box.

Regards,

Tony

I actually checked the source of your site - didn't notice it missing in the CSS above.

You want to add one more part:

.fl-builder .site-header {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 500;
    background: transparent;
}

.fl-builder #site-navigation,
.fl-builder #site-navigation .main-nav li a {
    background: transparent;
}

Thanks Tom, I'll try it when I get back tonight.

Regards,

Tony

Couldn't resist, I remoted in and it worked!! Thank you so much!

Regards,

Tony