To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

BalfBarA lightweight, multi-purpose navigation bar

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

There are no comments on this page.

New comment
Reply
Code previewClose