'Bootstrap Responsive Menu Not Closing After Opening

Hi so im kinda new to bootstrap, made shrinking navbar from bootstrap 4.5.3 but the responsive menu not closing after opening it, help will be appreciated thanks.

<!-- Start of Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top px-5">
    <a class="navbar-brand font-weight-bold text-light" href="https://www.google.com.pk/" style="border-radius:15px" style="border:3px">&nbsp;<img src="img/GrowFastMarketinglogov4.png" width="200px" height="50px">&nbsp;</a>
    <button class="navbar-toggler hvr-bounce-to-bottom collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <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 dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            About
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Program</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
  </nav>
  <!-- End of Navbar -->
htmlcssbootstrap-4navbarresponsive


Solution 1:[1]

Remove collaspsed from this line and try to implement

<button class="navbar-toggler hvr-bounce-to-bottom collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

**full code **

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top px-5">
    <a class="navbar-brand font-weight-bold text-light" href="https://www.google.com.pk/" style="border-radius:15px" style="border:3px">&nbsp;
<img src="img/GrowFastMarketinglogov4.png" width="200px" height="50px">
&nbsp;</a>
    <button class="navbar-toggler hvr-bounce-to-bottom " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <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 dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            About
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Program</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
  </nav>
  <!-- End of Navbar -->

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mohit maroliya

Related Questions