Why Navbar Collapse isn't working for me using Bootstrap?

Question

I'm having a problem with Bootstrap, navbar collapse button doesn't work I tried everything possible and followed every mentioned step on the Tutorial I was watching. How can I make it work for me without changing the Signup and Login buttons? Please help me.

Here's my html code:

body{
  background-color: #F7F7F7;
  font-family: Montserrat-Medium;
}

ul{
  list-style-type:none;
}

.navbar-brand{
  color: black;
  font-family: Montserrat-Medium;
  margin-left: 150px;
  text-align: center;
}
.nav-brand-text{
}

.nav-signup{
  background-color: #5E99EF;
  color: white;
  border: none;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
}
.nav-signup:hover{
  background-color: #4E83CF;
  color: #EAEAEA;
}

.nav-login{
  border: 5px solid black;
  border-color: #5E99EF;
  color: #5E99EF;
  padding: 11px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
  white-space: nowrap;
}
.nav-login:hover{
  color: #4E83CF;
  background-color: #EAEAEA;
}

.nav-items-row{
  margin-right: 150px;
}

<body>
  <nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
    <div class="container-fluid">
      <div class="nav-header">
        <button type="button" class="navbar-toggler position-absolute start-1" data-toggle="collapse" data-target=".navbar-submenu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="col-md">
          <a class="navbar-brand" href="#">
            <img src="res/logo.png" width="40" height="40" class="" alt=""></img><b> Tbadel.ma</b>
          </a>
        </div>
     </div>
     <div class="collapse navbar-collapse navbar-submenu">
        <ul class="nav nav-items-row position-absolute end-0">
          <ul class="col-md">
           <li><a href="#" class="nav-signup">S'identifier</a></li>
         </ul>
          <ul class="col-md">
          <li><a href="#" class="nav-login">Se connecter</a></li>
        </ul>
      </ul>
         </div>
        </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

  </body>

score 1 · Accepted Answer · answered Mar 25 '21 at 13:25

In bootstrap5 there is some changes in tag like: data-toggle change to data-bs-toggle and data-target to data-bs-target

So when use data-bs-target target id of div instead of class.

body{
  background-color: #F7F7F7;
  font-family: Montserrat-Medium;
}

ul{
  list-style-type:none;
}

.navbar-brand{
  color: black;
  font-family: Montserrat-Medium;
  margin-left: 150px;
  text-align: center;
}
.nav-brand-text{
}
.navbar-toggler {
  z-index: 1;
}
.nav-signup{
  background-color: #5E99EF;
  color: white;
  border: none;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
}
.nav-signup:hover{
  background-color: #4E83CF;
  color: #EAEAEA;
}

.nav-login{
  border: 5px solid black;
  border-color: #5E99EF;
  color: #5E99EF;
  padding: 11px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 4px;
  border-radius: 46px;
  white-space: nowrap;
}
.nav-login:hover{
  color: #4E83CF;
  background-color: #EAEAEA;
}

.nav-items-row{
  margin-right: 150px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-white shadow-sm p-4 mb-5">
  <div class="container-fluid">
    <div class="nav-header">
      <button type="button" class="navbar-toggler position-absolute start-1 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-submenu" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="col-md">
        <a class="navbar-brand" href="#">
          <img src="res/logo.png" width="40" height="40" class="" alt=""><b> Tbadel.ma</b>
        </a>
      </div>
   </div>
   <div class="collapse navbar-collapse" id="navbar-submenu">
      <ul class="nav nav-items-row position-absolute end-0">
        <ul class="col-md">
         <li><a href="#" class="nav-signup">S'identifier</a></li>
       </ul>
        <ul class="col-md">
        <li><a href="#" class="nav-login">Se connecter</a></li>
      </ul>
    </ul>
  </div>
</div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

</body>

Why Navbar Collapse isn't working for me using Bootstrap?

1 Answers1