[Support request] Header not merging as before.

[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/

[David]

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.

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

[David]

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.

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

[Fernando]

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!

[robchanoi]

Understood – thanks, works great, cheers.

[Fernando]

You’re welcome Robchanoi!

[Author]

Posts