boostrap 3.3.6 navbar doesnt work

Question

cant find the reason why when i cant use the button when i make my web browser smaller?

i tried looking in the internet but u cant find a solution

<nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button class="navbar-toggler  navbar-toggler-right" type="button" aria-controls="#ex1" aria-expanded="false" aria-label="Toggle navigation" data-toggle="collapse" data-target="ex1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">לוגו</a>
                </div>

                <div class="collapse navbar-collapse" id="ex1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a class="nav-link" href="#">דף הבית</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
                    </ul>
                </div>
            </div>
        </nav>

Parthipan Natkunam · Answer 1 · 2018-01-09T10:24:29.703

0

Most probably, you haven't added jQuery before adding bootstrap's JS file. Bootstrap's js code depends on jQuery and so, jQuery needs to be added which should be followed by bootstrap's js file (most probably bootstrap.min.js)

edited Jan 09 '18 at 10:24

answered Jan 09 '18 at 10:08

Parthipan Natkunam

756
1
11
16

score 0 · Answer 2 · answered Jan 09 '18 at 10:10

0

First you need to make sure that all the files are correctly connected. If all files is ok, try to use the markdown from this answer.

answered Jan 09 '18 at 10:10

Alexander Z

630
3
22

score 0 · Answer 3 · answered Feb 14 '20 at 08:17

Make sure you added this three scripts in exact this order:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

It is jQuery, than popper.js, than the bootstrap.min.js It is important that you load jQuery at first and bootstrap.min.js at last, while popper.js is in between

boostrap 3.3.6 navbar doesnt work

3 Answers3