Bootstrap Toggle Button Collapse Not Working [Solved]

Hello,

I was implementing the bootstrap toggle collapse option in my code so that the webpage is responsive to small screen sizes.

However, even though I’m able to hide the menu options in the navbar for smaller screen sizes, I’m however unable to place the toggle icon (the three dashes) in its place.

I found that two links are necessary for accessing this facility, which are:

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

To be on the safer side I’m also using the below two urls, just in case:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

I think I’m overlooking something as a result of which I’m unable to derive the required output.

Can you please help by going through my code in my codepen project, link of which is mentioned below?

Thank you.
AB

My Codepen link: http://codepen.io/abbor123/pen/EgjLdR

Apparently this was solved by changing the navbar class from navbar-fixed-top to navbar-default.

I’ve no idea why the default case worked and not the fixed-top.

1 Like