If you want to use easing, dont forget to add it like this one !
If you don't have a li.active, hbn will not work.
$(document).ready(function(){
$('ul.nav').hoverifyBootnav();
});
Add data-hbn to call Hoverify Bootnav
duration_effect_on , //400
duration_effect_off , //1000
easing_effect_on , //null
easing_effect_off , //null
effect_mouse_hover , //classic or teleportation
effect_mouse_out , //classic or teleportation
background_color , //null
color , //null
//Function
my_effect_mouse_hover , //null
my_effect_mouse_out , //null
You can set your own function on mouse hover & mouse out
$('ul.nav.do-hbn').hoverifyBootnav({
'duration_effect_on' : 400,
'duration_effect_off' : 1000,
'my_effect_mouse_hover': function(){ //do what you want },
'my_effect_mouse_out': function(){ //do what you want }
});
If you call Hoverify Bootnav on many nav like this
$('ul.nav.do-hbn').hoverifyBootnav({
'duration_effect_on' : 400,
'duration_effect_off' : 1000,
'easing_effect_on' : 'easeOutElastic',
'easing_effect_off' : 'easeOutBack',
'background_color' : 'black',
'color' : 'red'
});
And if you want to overwrite an option for one particular nav, use data attribute!
Like this (overwrite background-color):
You want to set your own style? Use the selector .hoverboot-pill, like this
.hoverboot-pill{
background-color: none;
border-bottom: 2px solid #337ab7;
}