Make Beaver Themer Header Stick 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 and enqueue it to your theme and paste the content of the original themer header layout js file, 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.

 

1 Comment

  1. […] To change the default behavior of the Themer javascript of shrink and stick effects so it can appear at any viewport – see the js post. […]

Leave a Comment