Bootstrap sticky-top nav-bar is overlapping content when I use smooth scroll

I have tried to fix this error for a few days and no googling or old answers seem to fix the issue.

I have added a sticky-top nav bar that sits within my body (underneath a jumbotron hero image, also within body). I have added in smooth scroll and everything works fine. However, when I click on a link and it scrolls down, it overlaps the beginning of my container with the content.

I have tried adding padding-top and margin to my body as I have seen suggested but it places the padding above the jumbotron (.hero). I have then tried taking my jumbotron and nav out of body and placing them in header, which does fix the issue of the overlap but the nav no longer sticks to the top of the page (which is probably why it fixes the issue!)

There doesn't seem to be any overflow in the css that would cause this.

This is my first attempt at writing code so I've run out of ideas. Does anyone have any suggestions or reasons as to why this is happening?

I have set this up in a jsfiddle (https://jsfiddle.net/ahronpeskin/gbmsket1) it seems to have added a white space between my jumbotron and nav bar - and the smooth scroll doesn't work but clicking the links has the same issue.

HTML

<body data-spy="scroll" data-target="#navbarText">
   <!--hero image-->
  <div class="jumbotron jumbotron-fluid hero">
    <div class="container">
      <h1>Jill Peskin Counselling</h1>
      <p>
        Here for you when you need it most
      </p>
    </div>
    </div>

  <!--navbar-->
  <nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Jill Peskin Counselling</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

      <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#jill">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#training">Training and Experience</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact Me</a>
        </li>
      </ul>
      <span class="navbar-text">
        Here for you when you need it most
      </span>
    </div>
  </nav>


CSS

body{
    position: relative;
}

/*hero image*/
.hero{
  background: url(Images/zen.jpg) fixed center no-repeat;
background-size: cover;
padding: 400px;
text-transform: none;
color:white;
margin-bottom: 0;
}

/*navbar*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

Solution

Instead of JQuery-Slim use normal minified JQuery.

And do the smooth scrolling with that.

here:

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous">
    </script> 

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!--smooth scroll-->
    <script src="js/smooth-scroll.polyfills.min.js"></script>
    <script>
      $(document).on('click', 'a.nav-link', function (event) {
          event.preventDefault();
          console.log("CLICKED ANCHOR!");

          $('html, body').animate({
              scrollTop: $($.attr(this, 'href')).offset().top - $(".navbar.sticky-top").height()
          }, 500);
      });
    </script>

This basically listens for a click on a.nav-link, prevents default behavior, calculates the offset from top and subtracts the height of the nav itself

If you have any further questions, please ask