[Resolved] Transparent header

[Jay]

I sent this request to Beaver Tunnels but they suggested I need to employ the technique in this post:
https://beyondbeaver.com/create-a-beaver-builder-transparent-header/ to address my need. But I think the CSS classes are different for BB Theme than GP. Your help would be appreciated. I included my email to Beaver Tunnels
===
Hi,
I created a header template. My objective is to make it semi-transparent so the video background in the next row will “tuck under” it. However, I’m not successful and I can’t figure out why.

The template is set to a 20% opacity which works when an element is added a content row. What am I missing and suggestions on how to debug/fix? Thanks guys.

http://dev.carotherspkwyvet.com is the page.

P.S. I have the template set as global…

[Leo]

Hi Jay,

Not really sure what you meant?

The header and the content are built from BB so all the CSS in there are from BB as well. I don’t think GP has any control over the header and content right now.

Maybe try their method?

Let me know if this answers your question.

[Jay]

ok. the css i assumed was for the BB theme. i’ll try their method first.

[Tom]

Hi Jay,

Have you tried this method?: https://docs.generatepress.com/article/merging-header-navigation-content/

[Jay]

Actualy want to do it that way but for some reason the advanced selection is not showing up in the meta box.

[Leo]

Something needs to be entered in the content box.

So like the screenshot <span></span> or HTML comment <!--This is a comment-->

[Jay]

Got it! But will the suggested method work with BB?

[Tom]

It’ll work with any element directly below the header 🙂

[Dan]

I am using BB and generatorPress and I have been using this in the css and it is working. Just make sure you have it commented out when you are working on it because you won’t be able to edit your top row in beaver builder if you are using that
/* Create transparent header that sits over the hero content */

@media (min-width:600px) {
.site-header {
z-index: 100;
position: absolute;
width: 100%;
}
nav#sticky-navigation {
background: rgba(0,0,0,0.3);
}
}

[Author]

Posts