Sticky Header - Remove from specific page, fix jumping

pingram3541

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.

Albert

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.

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

pingram3541

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.

Albert

Sure, we understand it. We will consider such option for Layouts then.

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

pingram3541

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

pingram3541

I just saw in 12.3 added option in layouts enable/disable sticky header.  Awesome, thanks!

Albert

No problem

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