Search code examples
htmlcssbootstrap-4navbar

Boostrap 5 nav bar not closing


Nav bar not closing in responsive mode

All ready added libraies ''''

        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul class="navbar-nav  mb-2 mb-lg-0">
            <li class="nav-item active">
                <select class="users" id="users">
                <option><a class="nav-link active" href="#">User</a></option>
                <option><a class="nav-link active" href="#">Employee</a></option>
                <option><a class="nav-link active" href="#">Admin</a></option>
                </select>
            </li>
          </ul>
        </div>
    </div>
      </nav>
```

Solution

  •      <nav class="navbar navbar-expand-lg">
      <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item active">
          <select class="users" id="users">
            <option><a class="nav-link active" href="#">User</a></option>
            <option><a class="nav-link" href="#">Employee</a></option>
            <option><a class="nav-link" href="#">Admin</a></option>
          </select>
        </li>
      </ul>
    </nav>
    

    I have removed the <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> part and now you can see the dropdown menu while changing the resolution.