Archived topic
Header element not contained?
13 replies · Started by William on December 6, 2020
Hi there,
I made a header element for posts which looks all good, except it is not contained but appears full width.
You can see it here.
The look I'm going for, for this, is with something similar to this.
Is it possible to get the header element to be contained and, if so, the same width as the content?
Many thanks as always,
Hi there,
try this CSS to keep your hero inner container the width of the primary container:
.page-hero .inside-page-hero.grid-container {
max-width: 75%;
margin-left: unset;
}
I currently have another header element that appears when there is a featured image, so don't want to change that. See here compared to this , where does not have the container (as intended) for this featured image element.
I added the code and it made a slight shift for both headers, this and this.
The second link still is unable to look like this though.
Couldn't you just set both the inner and outer container to be contained in the header element without any CSS?
That does not seem to work.
What I would like is for:
1) this header element to look the same as what can be seen here. (above content, but with sidebar to the side).
Would it be ok if the sidebar moves up?
https://www.screencast.com/t/efJyofxzzyZ
That's what I want. This image below is how I want it to look:

This next image is the current look of it:

That case you can use this filter to move the page hero inside the content:
https://docs.generatepress.com/article/generate_page_hero_location/
add_filter( 'generate_page_hero_location', function( $display, $element_id ) {
if ( 10 === $element_id ) {
return 'generate_before_content';
}
return 'generate_after_header';
}, 10, 2 );
And edit the 10 to match the element ID.
Is that for both occurrences of '10'?
It seems to partially work here. The sidebar needs an offset and the content appears quite far below though.
Is that for both occurrences of ’10’?
No sorry forgot to mention. Just this one needs to be changed:
10 === $element_id
The sidebar needs an offset and the content appears quite far below though.
That's because the header element merged is turned on.
Edit your Header Element and remove/reduce the padding.
That's perfect thank you!!!!
Glad to hear that!
