Sticky Header - Remove from specific page, fix jumping

pingram3541 · March 2016

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 · March 2016

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.

pingram3541 · March 2016

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 · March 2016

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

pingram3541 · March 2016

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 · March 2016

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

Albert · March 2016

No problem

Sticky Header - Remove from specific page, fix jumping

Comments