Adding an Autohiding Bootstrap Navbar to Sage with Bower

sage
1

Hi

I’ve been using Roots for some time but have found that I cannot run a number of jquery plugins with roots.

For example, the Autohiding Bootstrap Navbar (https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar)

is one that will steadfastly not work…

I bower install it:

bower install --save bootstrap-autohidingnavbar

…and place the jquery in the main.js file

var Sage = {
// All pages
’common’: {
init: function() {
// JavaScript to be fired on all pages

$(".navbar-fixed-top").autoHidingNavbar();

  },
  finalize: function() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  }
},



I have changed the autohidingnavbar bower.json - 
to 

"main": "dist/jquery.bootstrap-autohidingnavbar.min.js",

I have also experimented with adding it to assets.php and manifest.json but with little effect.
I have also tried loading jquery plugin separately as here: Is it possible to use jquery plugins without bower in sage?

Does anyone know where I’m going wrong with loading the assets (or is it because autohidingnavbar is incompatible with versions of bootstrap)?

Any advice would be gratefully received, as there’s loads of demand for an auto-hiding navbar.

Thanks in advance

Neil Puttick

2

I can’t help with fixing this but you could try Headroom.js instead?

2 Likes
3

Thanks Paul…Headroom seems to work fine…

A little note for using bootstrap with headroom.js — you might need to put some css (to your fixed nav) to get it working properly

.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.headroom–unpinned {top: -100px;}
.headroom–pinned {top: 0;}