如何在不使用固定顶部导航栏的情况下让 Bootstrap 导航栏在内容前面展开

Question

I'm trying to get my bootstrap navbar to expand in front of the page content. Currently, when the viewport get small enough and it collapses in to the hamburger toggle, upon expansion it shifts the content of the page down. I would like for it to expand in front of the content instead of shifting everything down. I saw some similar posts that said you can achieve this using the "fixed-top" classes added to the navbar - I tried that and it did work, but I would prefer to not have the navbar bar fixed-top, and cannot figure out how to have it expand in front and not be fixed-top. I'm relatively new to HTML/CSS so apologies if i'm missing something obious here. Code is below.

<section class="navigation">
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="index.html"><img class="home_icon" src="Home_icon.png"></a>
      <button class="navbar-toggler" 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 mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="shows.html">SHOWS <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="music.html">MUSIC</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">CONTACT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">ABOUT</a>
          </li>
        </ul>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://facebook.com/sweetchicle"><i class="fab fa-facebook-f social-icon"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://twitter.com/sweetchicleband"><i class="fab fa-twitter social-icon"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/sweetchiclemusic/"><i class="fab fa-instagram social-icon"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </section>

Answer 1

You could make the position of section absolute and use container-fluid to fill the width of the viewport. A z-index will also be needed to make the nav function and appear on top of other content. Try applying the following to the opening section tag:

    <section class="navigation position-absolute container-fluid" style="z-index: 1;">