0

Im using Bootstrap 5 and my navbar has a sticky-top attribute. Basically when I click one of the links in my nav it scrolls to that section of the page but some of the content goes behind the navbar. Im wondering how I can get the scrolling to hard stop at the bottom of the navbar so the section isnt cutoff.

Here is the majority of the html code:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>



<!-- Body -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100" data-bs-smooth-scroll="true">
  <!-- Navigation Bar-->
  <nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
    <div class="container">
      <a href="#" class="navbar-brand">Navbar</a>
      <button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon mid-bar"></span>
            <span class="toggler-icon bot-bar"></span>
            </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav nav-pills ms-auto">
          <li class="nav-item">
            <a href="#about" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="#services" class="nav-link">Services</a>
          </li>
          <li class="nav-item">
            <a href="#art" class="nav-link">Artwork</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="navbar">
    <h4 id="about">About Us</h4>
    <p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 in 1939.</p>
    <img class="w-100" src="https://static1.cbrimages.com/wordpress/wp-content/uploads/2020/08/batman-2.jpg" />
    <h4 id="services">Our Services</h4>
    <p>Superman is a fictional superhero. The character was created by writer Jerry Siegel and artist Joe Shuster, and first appeared in the comic book Action Comics #1. The character regularly appears in comic books published by DC Comics, and has been
      adapted to a number of radio serials, movies, and television shows.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/marvel_dc/images/a/a5/Superman_Vol_5_1_Textless.jpg/revision/latest?cb=20180711061148" />
    <h4 id="art">Community Artwork</h4>
    <p>Yoda was a legendary Jedi Master and stronger than most in his connection with the Force. Small in size but wise and powerful, he trained Jedi for over 800 years, playing integral roles in the Clone Wars, the instruction of Luke Skywalker, and unlocking
      the path to immortality.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/starwars/images/d/d6/Yoda_SWSB.png/revision/latest?cb=20150206140125" />
    <h4 id="contact">Contact Us!</h4>
    <p>Discovered as a slave on Tatooine by Qui-Gon Jinn and Obi-Wan Kenobi, Anakin Skywalker had the potential to become one of the most powerful Jedi ever, and was believed by some to be the prophesied Chosen One who would bring balance to the Force.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/disney/images/5/50/Profile_-_Anakin_Skywalker.png/revision/latest?cb=20190313110540" />
  </div>
</body>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
joebob
  • 33
  • 5
  • Does this answer your question? [Offset scroll anchor in HTML with Bootstrap 4 fixed navbar](https://stackoverflow.com/questions/49331572/offset-scroll-anchor-in-html-with-bootstrap-4-fixed-navbar) – tacoshy Jun 16 '22 at 00:31

2 Answers2

0

You can use fixed-top bootstrap class to make header sticky like this :

<div class="fixed-top">
your content
</div>
Nensi Gondaliya
  • 67
  • 5
-1

The problem comes form 0 padding & margin of your content boxes. There are 2 solutions: 1.use padding-top equal to height size of your nav bar. 2.use scroll event in javascript and set offset equal to nav bar height. I put the css code for the first solution and if you want to use second, I can help you.

#about,
#services,
#art,
#contact{
padding-top:72px;
}
Rottmayer
  • 16
  • 2