[Support request] Header not merging as before.

Home Forums Support [Support request] Header not merging as before.

Home Forums Support Header not merging as before.

  • This topic has 7 replies, 3 voices, and was last updated 1 month ago by Fernando.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2278319
    robchanoi

    Hi – unable to locate why gap is still emerging. Header element “merge” applied to page.

    Stumped. Can push container up but curious as to why this is happening.

    Tks

    https://menspleasures.com/disclaimer/

    #2278416
    David
    Staff
    Customer Support

    Hi there,

    so you have a standard page, which is set to separate containers.
    This means it is subject to the Customizer > Layout > Container –> Padding and –> Separating Space.

    Which is creating the gap above the content.

    Choices:

    1. Use a Block Element to add your Page Hero section.

    2. Use some CSS yo remove the gap:

    .separate-containers .header-wrap + #page .site-main {
        margin-top: 0;
    }
    .separate-containers .header-wrap + #page .inside-article {
        padding-top: 0;
    }

    Personally use #1 as #2 may cause you to involve other workarounds.

    #2278431
    robchanoi

    Thanks David.

    You’re right, the block elements work fine so will do as advised.

    Is this what is causing the nav/right and search/left icons to appear further down the page than they should?

    Ex: https://menspleasures.com/crazycash-review/

    Where as this page is fine.

    https://menspleasures.com/best-free-live-sex-cam/

    Cheers.

    #2278444
    David
    Staff
    Customer Support

    No, on the page that is fine, you have a Logo being added by your header element, and it has this CSS which is centering the logo:

    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }

    If you change that CSS to this:

    .header-wrap .site-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }

    Then it will center any logo whent there is the merged header.

    #2278702
    robchanoi

    Awesome – thanks David.

    Should I just paste this in the individual posts Simple css or in the main Customizer Simple css – cheers for that.

    #2278874
    Fernando
    Customer Support

    Hi Robchanoi,

    You may remove this code as mentioned by David:

    .site-logo.page-hero-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }

    Then, you may paste this code in the Customizer Simple CSS:

    .header-wrap .site-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }

    This should apply to all site-logos whether it’s added by a Header Element or not.

    Hope this clarifies!

    #2279421
    robchanoi

    Understood – thanks, works great, cheers.

    #2279974
    Fernando
    Customer Support

    You’re welcome Robchanoi!

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