[Resolved] Transparent header / beaver Builder

[Wim]

Generatepress and Beaver Builder
As a lot of sites tend to use the minimal look (logo left & hamburger right on transparent header), I read through the forums and blocked the position of the header as Tom from GP suggested:

.site-header {
position: absolute;
top: 0px;
left: 0;
width: 100%;
z-index: 1000;
background-color:transparent;
}

Also set the position of the ‪#‎page‬ underneath:

#page {
top:0px;
}

As I’m using the free Responsive menu plugin for the Hamburger, the main navigation is not necessary any more:
.main-navigation {display:none;}
The only annoying thing that has to be done on every page is to increase the top padding on the first Beaver Builder row, so the text isn’t too close to the “header”.
Is there any way to do this in a general css way?
Sorry I’m still working on localhost for the moment, so can’t show you any examples.

[Wim]

Justin welch provided me the answer on facebook:

.fl-row:first-child .fl-row-content-wrap {
padding-top: 50px !important;
}

Don’t know if the important tag is necessary, but it seems to do the trick. Thanks for a great framework.

[Tom]

That looks good to me 🙂

Thanks for using GP!

[Author]

Posts