Site logo

Archived topic

Header element not contained?

13 replies · Started by William on December 6, 2020

Viewing posts 1–14 of 14

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).

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.

Thank you for that - that seems to work, although the gaps above/below and sidebar seem a bit off - is there a way to change these to make this look like this for them?

Update (sorry) - merge turned off and sidebar is good now, but would appreciate something for the gaps above/below element.

Edit your Header Element and remove/reduce the padding.

That's perfect thank you!!!!

Glad to hear that!

This archived topic is closed to new replies.