How to collapse a nav from the center of the page to a top navbar

How can I have my nav links in a ul that runs across the page BENEATH a large image, but then have those same links be moved into a collapsed navbar with a button at the top of the page? All I see are options that require having the nav links run across the top of the page or along the side. Here's my code.

<body>
    <img class="img-fluid" src="img/latestlogo3.png" alt="header-img">
    
    <div class="container">
    
     <br>
     
      <ul class="nav justify-content-center">
        <li class="nav-item ml-3 mr-3">
          <a class="nav-link" href="#">Who is Gustav Mahler?</a>
        </li>
         <li class="nav-item ml-3 mr-3">
          <a class="nav-link" href="#">EPISODES</a>
        </li>
        <li class="nav-item ml-3 mr-3">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item ml-3 mr-3">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
      </ul>
     
     <hr>
     
     <br>
     
     <div class="row">
        <div class="col-sm mb-4 center-block">
            <img src="img/episode.png" class="img-fluid"/>  
        </div>
        <div class="col-sm mb-4 center-block">
            <img src="img/episode.png" class="img-fluid"/>
        </div>
    </div>
</body>

Solution

Use the display helper:

https://getbootstrap.com/docs/4.3/utilities/display/

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

So you need two navbars, one that responds at large sizes, and the other one for smaller sizes.