Breaks dropdown menus?
iversoncreative opened this issue · 4 comments
I just tried implementing this on my personal site and it seems to have broken my dropdowns, so I disabled it. But I'd love for it to work because it looked great, so I'm submitting an issue.
I tried overwriting the bower file to just load the js, but it still wouldn't fire my Bootstrap dropdowns on click. Anyone else experience this? I see the demo site fires the dropdowns on hover...
My site is built using the Roots Sage starter theme for WordPress, which uses the SASS version of BootStrap.
Ran into this issue with Sage as well.
If you are including the package via bower and overriding the main.js with bower.json by including the bootstrap-autohidingnavbar, it is expecting bootstrap-official to be the dependency, where as Sage uses bootstrap-sass. Because of this, it's compiling the autohidingnavbar ahead of the bootstrap-sass js files resulting in the dropdown not working. In order to fix this you need to override the dependencies to point it to bootstrap-sass.
Example below:
"bootstrap-autohidingnavbar": { "main": [ "./dist/jquery.bootstrap-autohidingnavbar.js" ], "dependencies": { "jquery": ">= 1.9.0", "bootstrap-sass": "3.3.6" } }
Source for solution: https://discourse.roots.io/t/possible-reordering-of-main-css-and-main-js-rendering/4102/14
@nroca BINGO! I totally should have thought of that. Your fix worked like a charm. Check it out http://patrickiverson.com/
"bootstrap-autohidingnavbar": { "main": [ "./dist/jquery.bootstrap-autohidingnavbar.js" ], "dependencies": { "jquery": ">= 1.9.0", "bootstrap-sass": "3.3.6" } }
Also, that link for the solution was broken for me.
@iversoncreative glad to be of help! fixed the link. my markdown isn't so great lol.