[Resolved] Header element not contained?

Home Forums Support [Resolved] Header element not contained?

Home Forums Support Header element not contained?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1569092
    William

    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,

    #1569178
    David
    Staff
    Customer Support

    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;
    }
    #1569400
    William

    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.

    #1569560
    Leo
    Staff
    Customer Support

    Couldn’t you just set both the inner and outer container to be contained in the header element without any CSS?

    #1570755
    William

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

    #1570835
    Leo
    Staff
    Customer Support

    Would it be ok if the sidebar moves up?
    https://www.screencast.com/t/efJyofxzzyZ

    #1570872
    William

    That’s what I want. This image below is how I want it to look:

    This next image is the current look of it:

    #1570993
    Leo
    Staff
    Customer Support

    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.

    #1571642
    William

    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.

    #1571874
    Leo
    Staff
    Customer Support

    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.

    #1572805
    William

    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.

    #1573018
    David
    Staff
    Customer Support

    Edit your Header Element and remove/reduce the padding.

    #1573034
    William

    That’s perfect thank you!!!!

    #1573067
    David
    Staff
    Customer Support

    Glad to hear that!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.