Collapsible nabbed being covered by other elements Bootstrap

I have used Bootstrap to make a collapsible navbar, which has a toggle button to open it up. But when I added more elements after the navbar, they don't seem to move down when clicking the toggle button, thus the navbar functionality is working fine, it's just not showing up there. What can I do? Here's my code:

<nav class="navbar navbar-expand-lg navbar-light" style="width: 100vw; height: 15vh; background-color: white;">     <div class="container-fluid">      <a class="navbar-brand" href="#"><div id="logoimg"></div></a>               <button id="the-toggle-btn" onclick="onToggleClick()" class="navbar-toggler" style="right: 0%;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">            <span class="navbar-toggler-icon"></span>     </button>                <div class="collapse navbar-collapse" id="collapsibleNavbar">      <ul class="navbar-nav">        <li class="nav-item">          <div class="dropdown show">    <a class="btn dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">    Top Talent    </a>      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">      <a class="dropdown-item">MetaExperts Skills Directory</a>      <a class="dropdown-item">MetaExperts Expertise</a>      <a class="dropdown-item">Support</a>    </div>  </div>        </li>        <li class="nav-item">          <a class="nav-link" href="#">Why Expert</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#">Customer Service</a>        </li>         <li class="nav-item">          <a class="nav-link" href="#">Resources</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#">About</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#">Contact Us</a>        </li>             <li class="nav-item">          <a class="nav-link" href="#">Executive Blog</a>        </li>      </ul>       </div>        <form class="d-flex flex-row">         <i class="fa fa-search" id="search-icon" style="font-size: 4vh; margin-left: 75%; margin-right: 5vh;"></i>         <input id="searchbox" class="form-control me-2 type="search" placeholder="Search" aria-label="Search">       <i class="fa fa-times" id="close-icon"></i>        </form>           </div>    </nav>  <!-- Here is where the navber ends and the problem begins. I want the images below to move down when the navber is collapsed-->  <div id="image-cover">    <div class="demo-img" id="demo-image-one"></div>     <div class="demo-img" id="demo-image-two"></div>     <div class="demo-img" id="demo-image-three"></div>   </div>  

https://stackoverflow.com/questions/67444580/collapsible-nabbed-being-covered-by-other-elements-bootstrap May 08, 2021 at 02:06PM