Bootstrap 5 nav-scroller - how to keep on screen under navbar when scrolling down page

Question

I like the second navbar that is in the Offcanvas navbar example. How can I stop it from disappearing when scrolling down the page?

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
    <div class="container-fluid">
         <a class='navbar-brand'>Brand</a>
    </div>
</nav>

You can scroll horizontally through the links in this. I want it to stay fixed on the screen like the navbar above when the user scrolls down the page

<div class="nav-scroller bg-body shadow-sm">
    <nav class="nav nav-underline" aria-label="Secondary navigation">
      
      <a class="nav-link" href="#">Link 1</a>
      <a class="nav-link" href="#">Link 2</a>
    </nav>
</div>

This is the css in the bootstraps example file I downloaded. I did not add this in my project. I'm just using a cdn for bootstrap, but the horizontal scrolling still works. I couldn't find .nav-scroller in the docs, am I wrong to assume that it's included in the cdn?

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

Work around Kind of got it working like this:

<nav class="nav nav-underline fixed-top" aria-label="Secondary navigation" style="margin-top: 56px; background-color: white; border-bottom: 1px solid light-gray; padding-bottom: 1px;">

Answer 1

You need to add fixed-top to .nav and margin-bottom:1rem; to .nav-scroller

.nav-scroller {
  z-index: 2;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow:hidden;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
main{
  margin-top:8rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="nav-scroller fixed-top shadow-sm ">
  <!--       FIRST NAV     -->
  <nav class="navbar  navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
         <a class='navbar-brand'>Brand</a>
    </div>
   </nav>
<!--       SECOND NAV     -->
    <nav class="nav bg-white" aria-label="Secondary navigation"> 
      <a class="nav-link" href="#">Link 1</a>
      <a class="nav-link" href="#">Link 2</a>
    </nav>
</nav>

<main class="">
<div class="">
  <h1> content here </h1>
</div><br><br><br><br><br><br><br><br><br><br>
<div>
  <h1>more content here </h1>
</div><br><br><br><br><br><br><br><br><br><br>
<div>
  <h1>more content here </h1>
</div><br><br><br><br><br><br><br><br><br><br>
  </main>