Sticky Header - Remove from specific page, fix jumping

Not sure if this is the best way to go about this but when I have sites using the sticky header sometimes I want to disable it on specific pages (which still isn't an option in custom layouts yet). i.e. such as unique landing pages for marketing purposes.

I found that if I load my own "page" specific js via functions.php and include something like this to remove the body class "sticky-header" that solves the problem in the cases I don't want the sticky header.  This works because the sticky function looks for this class to be able to trigger itself.

(function($){
  //remove sticky header function
  $('body').removeClass('sticky-header');
})(jQuery);

However, in the case where I do want it but the content height is just slightly taller than the viewport height, I haven't found a solution for the content jumping.  Just curious if anyone has any suggestions, thanks.

Comments

  • Hi,

    to remove sticky header from specific pages, you can use the following css instead:
    .page-id-xxx #Top_bar.is-sticky { display: none !important; }
    where xxx is PAGE ID.
  • Thanks and yes the does hide the sticky header but it doesn't remove the jquery function that sometimes can cause page jump, especially if the header has many custom overrides.

    One of the biggest things I like about betheme is the amount of header options it has.  I'd like to see another one with the logo below the menu (which I kind of can achieve by using the social menu), but it also causes the page jump when pages are just slightly too tall, when you try to see that last bit of content (if its around the same height threshold as scrolltop), it jumps and you can never see the footer/credits.

    Using js to remove the class for now works, maybe add an option to templates or page options to disable the inclusion of the sticky class to disable sticky header on a per page basis.  Seems like a simple addition.  Thanks again.
  • Sure, we understand it. We will consider such option for Layouts then.
  • Great thanks for considering it.

    You might also try adding a condition to the mfn_sticky function in /js/scripts.js to also check against page content height vs viewport height and if the difference is not greater than the height of mfn_header_height, don't trigger the sticky because that's what is known to cause bounce.  That will fix the jumping for good =)
  • I just saw in 12.3 added option in layouts enable/disable sticky header.  Awesome, thanks!
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.