SOLVED: My Bootstrap Navbar Toggle is Not Toggling!

JavaScript
1

Hello :slight_smile:

So I’m pretty pleased with the progress of my personal portfolio site, even if it is taking me forever to do. Of course, I want the fixed navbar to collapse and be toggle-able on smaller screens. At the moment, my navbar is collapsing and the toggle button is appearing. However, nothing happens when I click the hamburger button. I’m sure that my menu items are supposed to appear. I can’t find what’s wrong. I did link the bootstrap css and js files as well as jQuery in the relevant sections of my codepen.

Could somebody please look at this navbar markup and tell me what is wrong? Do I have to somehow activate this with some jQuery/ JavaScript that I write myself or what? From all the tutorials I’ve read or watched it seems like it should work from this markup alone…

> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
>  <div class="container-fluid">
>     <div class="navbar-header">
>         <span class="navbar-brand pull-left hidden-sm hidden-xs"><img src="http://res.cloudinary.com/gratefulheartdesign/image/upload/v1466500362/grateful-heart-logo-small-span_sldwxo.svg" width="75%"/></span>
>       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ghdNavCollapse" aria-expanded="false">
>         <span class="sr-only">Toggle navigation</span>
>         <span class="icon-bar"></span>
>         <span class="icon-bar"></span>
>         <span class="icon-bar"></span>
>       </button>
>     </div>

>    <div class="collapse navbar-collapse navbar-toggleable-xs"  id="ghdNavCollapse">
>     <ul class="nav-list nav navbar-nav">
>       <li class="nav-item">
>         <a class="nav-link" href="#about">About</a>
>       </li>
>        <li class="nav-item">
>         <a class="nav-link" href="#portfolio">Portfolio</a>
>       </li>
>       <li class="nav-item">
>         <a class="nav-link" href="#contact">Contact</a>
>       </li>
>     </ul>
>    </div>
> </nav>

Any and all help will be greatly appreciated!

3 Likes
2

SOLVED…

I had added jQuery and bootstrap in the incorrect order in my header files. I had to load jQuery BEFORE bootstrap.

13 Likes
3

Thanks for the share, I will keep this in mind.

1 Like
4

This happened to me the other day too.

5

It took me ages to try and find a solution… I ended up remembering to go in the freecodecamp chatrooms and just at that moment somebody was telling someone else to load jQuery before Bootstrap. Their problem was not the same as mine, but it made me go and check their codepen. And sure enough, their hamburger button didn’t work either. So I went to my own header file and saw that I too had loaded Bootstrap before jQuery. All I needed to do was switch them around. Phew! What a relief.

I’m so glad there are more advanced people around to help.

5 Likes
6

wow! I have this same problem. and even after reading this I am not sure what exactly do I need to do.
I have my portfolio on codepen and I am adding the jquery and bootstrap using the settings, but maybe I am still missing something.
could you tell me what exactly do I need to do to make this work?

7

Hey man, sorry for only replying now.

So what solved it for me is in the JS section of my pen, under the ‘add external javascript’ setting, the very first thing that I add is jQuery from ‘quick-add.’ The second thing to add is bootstrap (also from quick-add.) After that, you can add other optional things like Font Awesome or whatever.

That is different and separate from the CSS section where you also have to quick add bootstrap, if you are using bootstrap css for the layout.

I hope this helps? Otherwise maybe post a link to your pen so we can check exactly where the problem is.

4 Likes
8

No, it’s okay. Problem’s solved now.
Thanks.

9

Thanks alot stumbled on the same issue but fixed it with your solution.

1 Like
10

I’m glad that it has been helpful!

1 Like
11

Thank you for this!!! This problem was killing meeee :tired_face: :joy:

1 Like
12

Yay, I’m so glad it could help you, I remember how much it frustrated me! :grinning:

1 Like
13

This problem was driving me mad but your solution worked, thank you so much! :slight_smile:

1 Like
14

great stuff! :smile:

15

Same exact problem, Thank you so much for the solution!

1 Like
16

@leactz do you know why I cannot even enable the basic functionality of fixing the navbar on top?

Thank you!
Cesare

17

Thank you for posting this! this was driving me up a wall trying to figure it out. Do you know why the order of the quick adds matters?

18

Thanks dude, This is really suck when it comes to technical problem like this! :grin:

1 Like
19

Thank you so much for posting this! I was going crazy trying to figure this out.
BTW for anyone else looking at this, make sure you are using the javascript link for bootstrap and not the CSS link for bootstrap.

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

1 Like
20

I had the exact same problem, except that the whole navbar wouldn’t toggle down on the smaller screen sizes.

Thanks so much for saving me from a major headache as I was starting to get frustrated as to why it wasn’t working! Works perfect now! Many thanks again.

Something so simply…yet caused a lot of problems :joy:

1 Like