SOLVED: My Bootstrap Navbar Toggle is Not Toggling!

JavaScript
21

I’m having the same problem over at https://logic0x.com , my navbar won’t toggle, my jQuery is loaded before bootstrap. Any luck?

22

hi @kyler

I think I see your problem. On your navbar button attributes, you have data-target=".navbar-collapse" this should be: data-target="#navbarSupportedContent"

note the # which indicates that you are referencing the ID of the following collapsible div.

1 Like
23

I actually never found out why the order matters - let me know if you have :slightly_smiling_face:

1 Like
24

Thanks! @leactz
Thank you so much!
1 like equals 1 person help another

25

Pleas i need help am studying with w3school and dropown and others things are not working for me what should i do?

26

Hey, I am having the same problem but the problem is that its working fine in codepen.io but while running it in Atom the hamburger is failing to work. I am attaching my code below for codepen and Atom.

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <a class="navbar-brand" href="">ROY</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="https://www.google.co.in" target="_blank">Google</a>
                 </li>
      <li class="nav-item">
            <a class="nav-link" href="https://www.youtube.com" target="_blank">Youtube</a>
                 </li>
      <li class="nav-item">
              <a class="nav-link" href="https://www.facebook.com" target="_blank">Facebook</a>
                 </li>
    </ul>
  </div>
</nav>

Atom–>

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Bootstrap installation</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  </head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <a class="navbar-brand" href="">ROY</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="https://www.google.co.in" target="_blank">Google</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.youtube.com" target="_blank">Youtube</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.facebook.com" target="_blank">Facebook</a>
        </li>
      </ul>
    </div>
  </nav>
</body>
</html>
27

Hi @Shirshak!

Welcome to the forum!

This post has not been active for over a year. I would suggest creating your own topic for your question.

Thanks!