Archived topic
Trying to use a Block element that layers the navigation over the image
11 replies · Started by Bandara on April 6, 2021
I'm not sure if I am using the right thing to achieve what I want.
I'm trying to have something like a hero image where the words of the navigation items across the top have a transparent (i.e. no) background and the image is underneath. I want to be able to use Gutenberg blocks to do this. The reason is that I'm not keen on having people (ie clients) use the html that is necessary in the Header Element and I want to use some stackable blocks we are accustomed to.
Is this possible? Honestly, it seems that the uses of the Blocks Element and the Header Element seem to overlap a bit so I'm kind of confused. I'm guessing the header element predates the blocks element?
Hi there,
yes, you would simply need to create a Header Element that has no hero content and just the Site Header tab set to Merge with Content.
Then create your block element hero - and the two will merge.
So I need to create two different elements? And make sure they are happening on the same page?
What's the "Block Type" for the Block Element? Site Header? (That doesn't seem to work.) I mean in the settings area, not what type of Gutenberg block to use.
Thats correct - at this time you requires a Header Element to create the Merged effect.
For your Block Element you want to use the Page Hero Block Type.
The block types are simple shortcuts that set up the hooks and provide some options that are specific to that type.
I don't have "Page Hero Block Type" as an option.
Sorry my bad - that will be an option in GPP 2.0 when its released.
For now you just need to use the Hook block type.
And in the Hook list select the generate_before_header hook.
Hmm. So the header is now transparent but the menu is not. Maybe that can't be avoided? But more importantly it is displaying the header below the Element Block. And the whole Element Block is covering up the top of the page content.
At this point it seems a bit complicated and I may just wait for 2.0. I haven't actually promised this to anyone yet, so I'll just hope they don't ask for it. :-)
Try changing the hook to generate_after_header.
But it may still be an issue as the block you're using is absolutely positioning the video background ... make that change and let me know
Ah! That did the trick!
Almost. It looks like I have set a background colour for the menu itself. Is there an easy way to override that (other than very page specific css, or creating another element)?
That's not a big deal because I can't even remember why I set a background colour in the first place, but I'd like to learn if there is a way to disable it.
Thanks so much for your patience and your help.
BTW, should I mark helpful for every post in the thread or just the last one? I'm happy to mark them all if it is useful for your metrics.
Hi there,
You could give this CSS a try:
.page-id-7625 #site-navigation {
background-color: transparent;
}Let me know :)
That did it! Thanks!
No problem :)
