Archived topic
after_header hook to add margin?
7 replies · Started by William on September 28, 2022
Hi there,
My current header is all done using the page hero element - this makes it easy to add margins to a box, for example. See here by moving the width of the browser in and out - it always has a margin to the left and right.
The problem is that the specific element cannot be used in the block editor. With this, I made something to replace it, but have had to use the after_header hook (closest hook to the page hero, I believe).
With this, I currently don't see a way to add a margin to the box I've created in this element. Is there a way to do this?
Staging details to view in private.
Kind regards,
Will
Hi William,
Sorry I'm a bit confused.
Are you referring to this element here?
https://www.screencast.com/t/2S1wPsTwJmgi
If so wouldn't you be able to control all the paddings and margins using GB's container spacing settings?
https://docs.generateblocks.com/article/container-overview/
I would have thought so. However, it seems no matter what margin right/left I put, the container still does not have a margin to the right/left so when the browser width reduces, it does not have a margin (but sticks to both sides of the browser)...that is until it gets to tablet and mobile widths.
You can see here.
Hi Will,
If a container block is set to contained width, left/right margin value will be replaced by auto no matter what value you entered.
This is to make sure the container block stays in the center horizontally.
I would suggest setting the container block back to full width and changing the page hero hook to before_main_content
That does not make it full width like a page hero (sidebar appears alongside the element).
I basically want the same as page hero but with blocks - is there anyway at all to do this currently, where you can achieve a margin left and right?
Hum.. give inside_site_container a try.
Hmm, not quite - causes the margin to appear even on very wide screens.
I managed to find a fix - use the after_header hook and apply this CSS:
.gb-inside-container {
margin: 0px 10px 5px 10px;
}It's a little annoying as had to add an HTML block to add the CSS, but it works for what I am trying to achieve.
Thanks for your help on this anyway!
Glad you figured out a solution :)
