Bootstrap Nav bar not working

Here is my code link https://s.codepen.io/himanshuahuja96/debug/YQWQBz/VJrxxZEWWppr

The link is expired.
Try pasting here the “normal” editing mode instead of the debug mode.

Anyway just before start make sure you are using the syntax for the correct version of bootstrap.

Codepen by default adds v4, while freeCodeCamp used v3.3.7 for its lessons.

In the newer version some classes changed name, so make sure to use the correct syntax for the version you’re using

did you mean this pen?
i’am not sure what you wanted to achieve there and why you using all those navbar-brands
here is navbar documentation for bs4

https://codepen.io/himanshuahuja96/pen/YQWQBz here is link , and i have again updated the nav bar with default one which has toggle in mobile view and dropdown also not working

bootstrap.js relies on jquery => jquery has to be included before bootstrap

sequence should be

https://code.jquery.com/jquery-3.1.1.slim.min.js
https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js

not

https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js
https://code.jquery.com/jquery-3.1.1.slim.min.js

2 Likes

Easy fix - like @rfprod said…just reorder your libraries to have jQuery above bootstrap and everything should work properly :slight_smile:

1 Like

Thanks Guys its so silly mistake :joy:

easy, it is not so silly as one may think.
by the way, you can debug such errors on your own using console (shift+ctrl+i).
in such cases (when dependencies are not included correctly) you will probably see some kind of general messages like

something is not defined

or in this particular case

Uncaught Error: Bootstrap’s JavaScript requires jQuery. jQuery must be included before Bootstrap’s JavaScript.

I did the above thing in order but then too its not showing. I inserted a snippet and its showing only brand and a button which is showing all toggle menu and no navigation bar.