Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

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