BS5 Sticky Nav over carousel

HTML & CSS
1

I’m trying to create a header section with a bootstrap 5 nav that floats over a carousel (or image on other pages).

Above the nav is a row (.headerTop). after the user scroll down past this section the nav should fix to the top.

I’m using the sticky-top class on the nav, but I must be using it correct as it’s not working.

Here is a codepen with what I have
https://codepen.io/aaron4osu/pen/RwZGPoP?editors=1100

<!--   top above nav section -->
<div class="headerTop">
    <div class="row text-center h-100">
      <div class="col-sm-4 bg-success h-100 d-flex"><div class="align-self-end text-center">top left section</div></div>
      <div class="col-sm-4 bg-info h-100 d-flex"><div class="align-self-end text-center">nav should fix after this scrolls out of view</div></div>
      <div class="col-sm-4 bg-success h-100 d-flex"><div class="align-self-end text-center">top right section</div></div>
    </div> 
</div>
<!--  end top above nav section --> 

<header class="">
  <!--  sticky nav section -->
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded sticky-top" aria-label="Twelfth navbar example">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            
          </ul>
        </div>
    </nav>
  </div><!--   close container -->
 <!--  end sticky nav section -->
  
  
  <div class="hero">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">

        <div class="carousel-item active" style="background-image: url('https://placeimg.com/640/480/tech')"></div>
        <div class="carousel-item" style="background-image: url('https://placeimg.com/640/480/arch')"></div>
        <div class="carousel-item" style="background-image: url('https://placeimg.com/640/480/nature')"></div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div> <!--   close hero -->
  
</header>

css

.hero{
  height: 600px;
}

.carousel-item {
  height: 600px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.headerTop{
  height:100px;
 
}

FYI…the carousel is inside a .hero class… on other pages this will be a single background image rather than a carousel.

2

Sticky elements are only sticky in their current context and when the parent element scrolls away so does the sticky element. You need to have the sticky nav as a child of the body if you want the rest of the page to scroll pass.

I would simply close the header under the sticky nav here and move the sticky-top class to the header.

<header class="sticky-top">
  <!--  sticky nav section -->
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded" aria-label="Twelfth navbar example">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            
          </ul>
        </div>
    </nav>
  </div><!--   close container -->
 <!--  end sticky nav section -->
  </header>
3 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.