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.