Make Beaver Themer Sticky Header And Shrink At Any Size

You can make the Beaver Themer header stick and shrink at any viewport width by overriding the default fl-theme-builder-header-layout.js that comes with Beaver Themer, your version will overrule the Themer javascript as it runs after and can be re-declared in javascript.

Create a js file, copying /wp-content/plugins/bb-theme-builder/js/fl-theme-builder-header-layout.js and enqueue it to your theme, there are 2 places that define when the stick/shrink behavior is applied, one in the _initSticky function and the other in _initShrink function and they are the same…

this.win.width() >=FLBuilderLayoutConfig.breakpoints.medium

You just swap out FLBuilderLayoutConfig.breakpoints.medium for the pixel width value desired to make it happen, so if you wanted both shrink and stick to appear in tablets and bigger you would change it to…

this.win.width() >= 768

Adjust the pixel value and greater than/less than/equals operators to suit,  to only apply one behavior out of shrink/stick just change the appropriate one.

Full gist below where both effects apply to devices over 768px wide.

So to apply to all devices just change the pixel value to 0, this is commented in the code snippet.

 

3 Comments

  1. Hans Groen on April 30, 2020 at 8:58 pm

    Hi,
    thanks so much, this is working perfectly….well almost ;-)

    It now works on mobile devices, only the effect now has a bigger ‘offset’ (only on larger screens it seems), i.e. it doesn’t start immediately once I start to scroll, but only after I have scrolled for a while (let’s say 500px). What could be the problem there?

    Thanks in advance for any pointers ;-)
    Much appreciated!

    Hans

    PS Website is not public – pw protection = rb / rixazohe

  2. Rob on November 8, 2019 at 3:56 pm

    Im interested in this technique, however, I can’t get this to work.

    I’m pretty sure that towards the end…

    $( function() { FLThemeBuilderHeaderLayout.init(); } );

    Is calling the original FLThemeBuilderHeaderLayout.init();

    Has anyone got this to work?

    • Neil Gowran on November 9, 2019 at 12:13 am

      Yes it still works according to the post instructions, for it to work on all devices change the value to 0 where this code appears in 2 placesthis.win.width() >= 0 .

      Also test that you have correctly enqueued your js file by searching for it in the browser inspector tools.

Leave all Comment