Hello. Any update on this issue?
Hello @carlgross
Thanks for your patience, and sorry for the delay in getting back to you.
From your screenshots, we can see the header is getting cut off by the WordPress admin bar when you are logged in. Here is a small JS snippet that will fix this by pushing the sticky header down by 32px whenever the admin bar is active.
Please add the following code to your site (you can use a custom JS plugin or the theme’s custom JS field):
jQuery(document).ready(function ($) {
function fixAdminBarSticky() {
var header = $('.she-header-yes');
var isAdminLoggedIn = $('body').hasClass('admin-bar');
var windowWidth = $(window).width();
if (header.hasClass('she-header')) {
if (isAdminLoggedIn && windowWidth >= 768) {
header.css({
"top": "32px",
"transition": "all 0.4s ease"
});
}
}
}
$(window).on('scroll resize', function () {
setTimeout(fixAdminBarSticky, 10);
});
fixAdminBarSticky();
});
I hope this helps. If the issue persists or we are missing something here, please let us know.
Best Regards.
Thank you for your reply. Here are my follow-ups.
Sorry for the confusion, but the issue is present regardless of whether the WordPress admin bar is displayed or not. I’ve added two new screenshots in the same folder to illustrate that. You should also be able to see for yourself if you open the URL in-question. Let me know if you see otherwise.
@carlgross
Thank you for the clarification.
It looks like the Sticky Header plugin may have been deactivated on your end. The site appears fine right now. Refer to this image: https://prnt.sc/2U6rq9bFoZTO
Could you reactivate it when you get a chance? That will help us reproduce the issue and find the right fix for you.
We are right here once it is back on.
Best Regards
Yes my mistake, I previously left it deactivated–sorry. I’ve now activated it. Can you check again?
Hello. Have you had a chance to take a look? The issue is still present.
Hello @carlgross
Thank you for your patience while our team looked into this.
We reviewed your site setup and found the root cause. Your header is set to absolute position, which makes it sit independently from the rest of the page content. Because of this, the header overlaps the page content on load instead of pushing it down.
To fix this, add a blank container at the top of your page with the same height as your header. This acts as a placeholder, so when the page loads, the header overlaps the blank container instead of your actual content, and everything below starts from the right position.
Once you add the container and publish the page, the overlap issue should be resolved. If you need any help setting this up, feel free to reach out and we will be happy to assist!
Best Regards
Thank you for your reply. Here are my follow-ups.
>> Your header is set to absolute position,
Can I ask why you say that? As I see it, the header element itself is not set to absolute position. But one element inside it–the logo image–is set to absolute position. This is by design, so the logo can partially overlap the content underneath.
>> To fix this, add a blank container at the top of your page with the same height as your header. This acts as a placeholder, so when the page loads, the header overlaps the blank container instead of your actual content, and everything below starts from the right position.
But in my case, I want the image to overlap actual content.
Thanks.
Hello. Any update on this?
Hello @carlgross
Thanks for your patience, and sorry for the delay getting back to you.
To clear up the confusion from our earlier reply: the absolute positioning on your header is actually coming from the custom CSS our team had provided previously to fix a separate issue. That is why it may not be visible as something you set yourself.
Here is what is happening: that CSS makes the header sit independently from the page flow. When the sticky header kicks in on initial load, the page content shifts up underneath it, which causes the height and padding changes you are seeing. After scrolling, the sticky behavior normalizes and everything looks correct again.
To fix this while keeping the sticky header active, adding a blank container at the top of your page content with the same height as the header acts as a buffer. The header overlaps that empty space instead of your actual content, and your logo can still overlap the real content below it since its own absolute positioning is separate. Your original design intent stays intact.
I hope this clear things up. If you have any queries, please let me know.
Best Regards.
OK noted. I had forgotten about the previous CSS–my mistake.
I made your changes, and they fixed the issue. We can consider this resolved.
