Bootstrap collapse button responding but not working

Question

I have the famous navbar button problem not working. I made sure that my script imports are in order & the HTML bit looks good. I load it up on localhost and it does not work.

HTML:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto ml-auto">
             <li class="nav-item active">
                    <a class="nav-link" href="#mh-home">Home</a>
             </li>

      </ul>
</div>

IMPORTS (at the end of the body tag):

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

*UPDATE:

I posted the website here under testing: not working after trying your solutions :/

http://conuplugs.com/secret.html

I think you missed bootstrap.min.css that's why it is not working! — Akif Hussain, Jun 08 '19 at 17:06
I made a [GIF](https://gyazo.com/83f9a524eda5a4324fa975861b6e538f), not working — mendy, Jun 08 '19 at 17:17
first of all you need to move your navbar from the class `row` — Nisharg Shah, Jun 08 '19 at 17:52
Got it bro, look out my edit answer. I checked my mail and I received mail from you — Nisharg Shah, Jun 08 '19 at 17:58

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Using the Slim version of jQuery cuts out a lot of the code that enables certain stuff to work. Take a look at this answer.

In the jquery.slim.js, the following features are removed:

jQuery.fn.extend

jquery.fn.load

jquery.each // Attach a bunch of functions for handling common AJAX events

jQuery.expr.filters.animated

ajax settings like jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, jQuery.ajaxTransport,jQuery.ajaxSetup

xml parsing like jQuery.parseXML,

animation effects like jQuery.easing, jQuery.Animation, jQuery.speed

All plugins use the jQuery extend functions and alot of them use the animation functions too.

Use the full jQuery script instead.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 08 '19 at 17:12

Studocwho

2,404
3
23
29

you can also use jquery slim for that, bootstrap also suggest jquery slim, https://getbootstrap.com/docs/4.3/getting-started/introduction/#js. **We use jQuery’s slim build, but the full version is also supported.** – Nisharg Shah Jun 08 '19 at 17:14
@NishargShah Ah well fair enough then. But it's something to bare in mind when using Slim version, some features might not work properly, if not with Bootstrap, then with other plugins. – Studocwho Jun 08 '19 at 17:17
I know but OP have problem in bootstrap, so i commented it – Nisharg Shah Jun 08 '19 at 17:18

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Its works fine, I removed only ml-auto from ul

for more info goto https://getbootstrap.com/docs/4.3/components/navbar/

Edit

mh-xs-mobile-nav this class are trying to block navbar collapsing.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#mh-home">Home</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

add this classes to debug your menu problems, `navbar-dark bg-dark` in `nav` tag — Nisharg Shah, Jun 08 '19 at 17:28
Hey, I debugged & found the source of the problem. I have 2 CSS files: `styles.css` & `responsive.css`, when I add responsive, the bug appears. Can I send you the file & we look at it? — mendy, Jun 08 '19 at 18:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194643/discussion-between-nisharg-shah-and-mendy). — Nisharg Shah, Jun 08 '19 at 18:24

Bootstrap collapse button responding but not working

2 Answers2

Edit