Prevent mfn-header-body-offset from pushing content down on specific pages

paulnardi

Hi MuffinGroup team,

I’m using BeTheme with the header type “Builder → Template (absolute)” and Body offset enabled. On page load, the <header> element is assigned the class mfn-header-body-offset.

My goal is to have the header visually overlay the first section of the page (e.g., for a landing page with a large hero section), without pushing the content down. However, the mfn-header-body-offset class seems to trigger a body offset or padding-top (likely via JavaScript or theme logic), which causes an unwanted gap between the header and the content.

I’m looking for a solution to:

1. Either disable this class on specific pages,
2. Or receive a clean theme-compliant workaround (e.g., via filter, custom hook, or CSS flag) – preferably without JavaScript or the layout shift that occurs during initial load.

I’ve tried overriding it via CSS (e.g., with margin-top: -80px) and even removing the class via JS, but both approaches result in visible layout jumps when the page loads.

Is there an official method or recommended practice for preventing the body offset from being applied on specific pages?

Additionally, is it possible to assign header templates to specific pages only, rather than globally across the entire site?

If so, this would allow me to create a second header template specifically for the homepage (e.g., one without offset), while keeping the default one for the rest of the site.

Thanks in advance for your help and for providing such a great theme!

Best regards,

Paul

Phil

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

It is always a good idea to also attach a screenshot showing your issue.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next