Archived topic
Overlay content to Hero with block element
5 replies · Started by Javier on June 15, 2022
I have set a hero to some custom post type content.
Following this video https://www.youtube.com/watch?v=TP8mgBQTgGg i first created a Block element with the content I want in the hero, then, I created a Header element selecting merge option, this works ok.
Now I want to overlay the first block from the page to the header, but it doesn't work.
To test I have set this:
.container.grid-container {
width: auto;
margin-top: -200px;
}But the content that should be seen above the header content is hidden behind it.
Hi there,
Can you share a link to where i can see the issue on your site?
Hi David, it's a private site, I add the link to Private Information.
Ok, so try this CSS:
.header-wrap + .gb-container + .container {
position: relative;
margin-top: -200px;
}The position: relative; will ensure the .container sits in front.
And this selector: .header-wrap + .gb-container + .container means the CSS only applies if there is a merged header followed by the 1 x block element hero before the content.
Thank you David.
You're welcome
