[Resolved] Overlay the header

[Marcel]

Hello. I tried to find an idea on this forum, but I was lost. I would like to ask if is possible to recreate something similar as here: https://www.screencast.com/t/bzhu446FH or here: https://www.screencast.com/t/NhofNYMMbR8.
Actually, I want to overlay a part of the header with other elements. Maybe using Gutenberg blocks or how? Please just guide me a little. Thank you!

[David]

Hi there,

so the Mellow site in our library does that:

https://gpsites.co/mellow/

It uses some CSS to reposition the page content:

@media (max-width: 768px) {
    .page-hero + #page {
        margin: -75px 15px 0 15px;
    }
}
@media (min-width: 769px) {
    .page-hero + #page {
        margin-top: -100px;
    }
}

It works when there is a page hero present on the page – which you can create using the Header Element:

https://docs.generatepress.com/article/header-element-overview/

[Marcel]

Thank you! It works. I suppose the same is applicable for Gutenberg blocks, am I right?

[David]

Would require a bit of CSS to make it work.
For example the set-up used on the Mellow site it uses Customizer > Layout > Separate Containers. So the Customizer > Colors > Content > Background Color applies to the inside-article of each post creating the transparent space between them.

On a Page the inside-article will be the entire page. So you would need to first off make the Page inside-article transparent:

.page .inside-article {
    background-color: transparent;
}

Then you would need to make the blocks background a different color. Which is tricky with the current blocks available in Core. A current method would be install the Gutenberg Plugin so you have the latest Block Editor. This includes a new Group Block, which has a background color ( and very little else).

With your content inside the Group Block – select the group block and in the Settings Sidebar > Advanced add an Additional CSS class eg. custom-block and then add this CSS to the Customizer:

.custom-block {
    padding: 20px;
    box-sizing: border-box;
}

You can add whatever styles you want to style the block. If all works well then save your Columns block as a Re-useable block, then you can just add the re-useable block and convert to a regular block whenever you need to repeat it.

[Marcel]

David, thank you!

Two more guides, please:
1. Do the same rules apply for the Woocommerce product categories pages?
2. When you refer to the Gutenberg Plugin, there is a specific plugin? Or any Gutenberg plugins that offer blocks customizations?

[David]

1. Woocommerce should behave like the blog posts – if not we can assist with some CSS.

2. This plugin is the official WP plugin ( ignore the reviews ) – any updates or bug fixes to the core WP editor happen here first and then several weeks later they are added to core, so this is always the most up to date:

https://en-gb.wordpress.org/plugins/gutenberg/

There are quite a few block plugins that provide customization of there own blocks but i am not taken with any of them, their code is not particularly nice. Tom is currently developing our own plugin that will add a huge level of customization.

[Marcel]

I’m just waiting for the plugin you told me. Do you have an ETA? I would prefer to wait and do not buy any other if Tom develops one… Thank you!

[Leo]

No ETA yet unfortunately. It’s still in development stage and will take a lot of testing to make sure everything works.

We will for sure announce it once we are getting close.

GhostKit, Kadence Blocks and Stackable all have free versions which offer quite a bit of functionalities.

[Jason]

Hi David & Leo,

is this still the best method for trying to accomplish this? Will this work with other sites besides Mellow?

Thanks

[Ying]

Hi Jason,

Yes, it’s still the way to go.

The CSS David mentioned here works for all GP sites when there’s a page hero in the page:
https://generatepress.com/forums/topic/overlay-the-header/#post-938443

[Jason]

Thanks Ying!

A follow-up question if you don’t mind:

I got the block to overlay the header by adding padding via: .page-hero + #page { margin-top: -750px;

Within it is an iframe for a chat box, that works fine when there’s an image in the header. BUT when I put a video in the header, I can no longer type in the chat box. Any idea what might be causing that?

Thanks!

[Ying]

Could you link me to a page with video in header?
Thanks!

But are you just want a background image or video for the entire site?

If so, why not just give the content or body a background instead of moving it up by using negative margin?

[Jason]

You all are soooo smart! Followed your advice, went with the theme site I wanted, used background video on body/content, all working well! Love you all, thanks again, nice weekend!

[Ying]

Awesome!
Glad it works for you 🙂

[Author]

Posts