Navbar Toggle - Won't Open or Close on Click

I realize there have been many questions about this but my navbar toggler icon isn’t working. When I shrink the window it is opens and remains open.

Clicking it is supposed to open and close it but it’s not doing either. I’m sure it has something to do with my bootstrap or js. Below is the code to my header and my navbar.

Did you add the jQuery and bootstrap JS files?

I don’t see bootstrap.min.js add it after jQuery.

You are also loading jQuery twice and one of the versions is super old. Unless you absolutely need an old version for some compatibility reason I’d highly suggest using the latest version of any external script resource as old versions can have security vulnerabilities.

I added the bootstrap.min.js after JQuery, but it’s still not working.

Which jQuery version is old?

The 1.12.1 version. But I can’t see what version the first one is so it might be old as well for all I know.

You can get the latest version from the jquery web site pick the top minified version.

https://code.jquery.com/jquery-3.4.1.min.js


Edit: Here is your nav with just jquery and bootstrap, I commented out some extra closing </li> in the HTML.
https://codepen.io/lasjorg/pen/qBOEmgW

If it still is not working for you, I will say you have a lot of external scripts loading. It might be worth commenting everything out except jquery and bootstrap and see if it works. If it does, then add the other scripts back one by one and check that everything is still working after each new script.

Thanks. Yeah I think I’m gonna have to try go through some of these scripts.
It works on Adobe Dreamweaver but not when it is live on my site.

Might be a file path issue (or a bad download maybe). Try using a CDN link for the scripts instead of the local files.

1 Like

Thanks! I got it all figured it out. That bootstrap.css is tricky.