CODEWITHSUNDEEP
javascripthtmljquerycssbootstrap-4
Ajay G
Ajay G

Reputation: 43

Bootstrap 4 NavBar toggle Button not Working when i put it inside button group

I need two buttons along with the toggle button when the navbar is collapsed. As I down want these buttons to be collapsed with menu items. So I have put the buttons inside the button group with toggle button. now the toggle button is not working anymore.

Here is the code. Please let me know what mistake I'm making. Thank you in advance.

<nav class="navbar navbar-expand-md navbar-dark sticky-top" style="background-color: #0a0a0a; margin-bottom: 0 !important; min-height: 60px;">
    <div class="container">
        <div class="nav navbar-header">
            <a href="#"><img src="images/logo.png" class="logo" alt=""/></a>
        </div>

         <div class="collapse navbar-collapse flex-column " id="navbar">
             <ul class="navbar-nav  w-100 justify-content-center px-3">
                 <li class="nav-item active">
                     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                 </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Courses
                     </a>
                 </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Classes
                      </a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      USP
                      </a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Contact
                      </a>
                  </li>
              </ul>
          </div>

          <div class="btn-group" role="group" aria-label="Basic example" style="color: white;">
              <button type="button" class="btn .btn-primary-outline border-right" style="color: white;">Sigh In</button>
              <button type="button" class="btn btn-danger"><i style="color: white;" class="fa fa-search" aria-hidden="true"></i></button>
              <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
              </button>
          </div>
      </div>
  </nav>

Upvotes: -1

Views: 1075

Answers (2)

wheel58m
wheel58m

Reputation: 124

The "data-target" on your navbar-toggler button is set to "navbarNav" this needs to be set to the ID of your navigation which is just "navbar".

<div class="collapse navbar-collapse flex-column" id="navbar"> <!-- NOTE: id="navbar" -->
    <!-- Navigation List -->
</div>

<div class="btn-group">
    <!-- buttons -->
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar"> 
    <!-- NOTE: data-target = "#navbar" (these should be identical) -->
    <span class="navbar-toggler-icon"></span>
    </button>
</div>

Upvotes: 1

Ender
Ender

Reputation: 71

here with navbar id

<button class="navbar-toggler" data-toggle="collapse" data-target="#**navbarNav**">

Must be the same here

<div class="collapse navbar-collapse flex-column " id="**navbar**">

also don't forget to call these js on your page

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions