Archived topic
Header not merging as before.
7 replies · Started by robchanoi on July 10, 2022
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
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.
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.
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.
Awesome - thanks David.
Should I just paste this in the individual posts Simple css or in the main Customizer Simple css - cheers for that.
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!
Understood - thanks, works great, cheers.
You’re welcome Robchanoi!