BalfBar

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

BalfBarA lightweight, multi-purpose navigation bar

JavaScript options

BalfBar_{A lightweight, multi-purpose navigation bar}