Archived topic
Site Header with Blocks Advice
10 replies · Started by Matt Stern on April 30, 2021
Hi Guys,
I'm building a site header with a block element. You can see it here: https://sternstaging.com/
I'm curious how you might suggest setting it up. For example, would you build it with *static* links as it is in the above example. Or would it be better to create the navigation in the customizer and set it up to sit on top of the colored section behind it?
I'm also wondering how you think about the differences between the element types "Site Header" vs Hook > "Before Header"?
Thanks in advance,
Matt
Hi Matt,
Is there a specific reason why you want to use a block element to build that header layout?
You can achieve that relatively easily with some CSS.
Hi Leo,
I'm not opposed to CSS, this way seemed easiest for my skillset :) I am considering using different colors for different pages, but perhaps CSS would still work? I'm open to your suggestions.
Thanks.
I would go with the default header and navigation personally so it will also work on responsive screens.
But if you are happy with the current result then that works for you as well.
And then create the angled background with css? Or use the block element to create the angled background?
I've been playing around with it: https://sternstaging.com/
And now the nav is being output by the theme and the background is created with a block element. Any ideas why the logo isn't showing up? I have it set in Site Identity....
If I select "Use Navigation as Header," the logo does show up, but then both the logo and the main nav get pushed down...
Screenshot of that here: https://nimb.ws/SL4PZM
Thanks, Leo.
Strange. I don't see the logo markup in the HTML at all.
I just tested the option and couldn't replicate the issue.
Do you have a retina logo uploaded? What if you remove that?
No retina logo in place. Very weird....
If I "deactivate" the block element header, the logo comes back: https://sternstaging.com/
So maybe it has something to do with the block element. Could it be a z index issue? But as you said, there was no html markup for the logo.
Would you suggest some css to replicate the angled background?
Another possibility would be to leave the header as is and use generate blocks on each page to create the angle. Not as slick, but it would probably work.
I wonder if it's easiest to just add the shapes with the first section of your content on each page and just create a header element to merge it:
https://docs.generatepress.com/article/transparent-header-and-navigation/
Or you can create a block element with the shape using the after_header hook, then create the merge using a header element, then use a negative margin for the first part of the content so it goes on to the shapes in the hook.
Some trial and error are definitely needed for this.
Sounds good. I'll experiment with your suggestions.
Thanks for the help.
No problem :)
