navbar does not load properly

Asked

Viewed 138 times

1

I’m studying HTML and decided to add the Bootstrap 4 in a small project. When browsing the component listing on the Bootstrap I came across the following navbar:

<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                  </ul>
                </div>
              </nav>

After downloading and referencing the framework on the page index.html I noticed that the navbar does not work properly when the screen is lowered and the button toggle is being shown. So I thought it was some problem with the Bootstrap because I saw the following error when opening the browser console:

Erro console

Again I changed the Bootstrap and the jQuery for version .min and yet the error persisted. Interestingly I could observe that in the browser Edge the error persists, however if I use an online interpreter of HTML, this failure does not occur and the button toggle works normally by displaying the hidden items.

What should I do to solve?

  • 1

    Face very likely the ordering of scripts in your document is wrong. Because I test this Navbar code here and there is no error in the console either in Chrome or in Edge. Place your entire document there in the question that is easier to give you an accurate answer.

  • 2

    You must carry the jquery.js before the bootstrap.js.

  • Sam, it worked... put it as an answer to the question...

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.