Setting up BalfBar is straightfoward, as shown on the project main page.
Using the SCSS/SASS files provided, it's also incredibly straightforward to get setup with BalfBar.
JavaScript options
There are several, easy-to-use JavaScript/jQuery options that make customisation easier. By default, you can run BalfBar with the standard/default options in which case it will go for the standard settings defined in the plugin.
JavaScript
$(document).ready(function(){ $("#menu").BalfBar(); });
However, you may wish to customise this further. For example, on my website I use the following setup:
JavaScript
$('.balfbar').BalfBar({mobileThreshold : 922, desktopFixedMenuStart : -2, mobileFixedMenuStart : 0, supportHover : true, fixedMenuCallback : function(e){ if (e == true){ $('html').addClass('fixed_menu_mode'); } else{ $('html').removeClass('fixed_menu_mode'); } }
| Option name | Description |
|---|---|
| mobileThreshold | When the menu is in mobile form, this should align with the CSS variable. |
| desktopFixedMenuStart | At what point down the page should the fixed menu callback be triggered when in desktop mode. -2 means when the user scrolls past the top of the menu, -1 means never and 0 means at the top of the page. Any other value specifies the exact scroll position to start at. |
| mobileFixedMenuStart | At what point down the page should the fixed menu callback be triggered when in mobile mode. -2 means when the user scrolls past the top of the menu, -1 means never and 0 means at the top of the page. Any other value specifies the exact scroll position to start at. |
| supportHover | Adds hover effects using JavaScript rather than CSS - this gives more flexibility but also lacks compatibility. |
| fixedMenuCallback | When the menu goes past the fixed menu point (i.e. desktopFixedMenuStart or mobileFixedMenuStart) this callback function is called. This must be either null or a function. |
Comments
