CODEWITHSUNDEEP
twitter-bootstrap
Ned
Ned

Reputation: 236

Bootstrap 4 beta scrollspy not functioning

Here is the codepen, clearly a work in progress.

I've written and re-written the relevant parts several times. From the documentation, it seems that all that needs to be in place is that the body position is relative in CSS and the navbar is the target, then the links need to correspond to distinct section IDs. All of that is in place, but the links are not getting the "active" class when the sections are scrolled through.

What am I missing? Thanks in advance.

HTML:

<nav class='navbar sticky-top navbar-expand-md navbar-dark bg-primary'>
  <div class='container'>
    <span class='navbar-brand h1 mb-0'>Ned Redmond</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navigation" aria-controls="Navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="Navigation">
      <ul class="navbar-nav nav-pills ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#aboutMe">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contactMe">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Résumé</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<section id='portfolio'>
  // CONTENT //
</section>
<section id='aboutMe'>
  // CONTENT //
</section>
<section id='contactMe'>
  // CONTENT //
</section>

CSS:

/* to activate scrollspy */
body {
  position: relative;
}

/* theming, adjustments */
.bg-primary {
  background-color: #16161d !important;
}
.nav-pills .active {
  background-color: #505069 !important;
}
#aboutMe {
  background-color: #F2F4F3 !important;
}
#portfolio .row {
  padding-top: 30px;
}
section {
  padding-bottom: 30px;
}

JSS:

$('body').scrollspy({
    target: '.navbar',
    offset: 0
  });

Upvotes: 0

Views: 83

Answers (1)

Robert
Robert

Reputation: 6977

This is a simple problem of not including all the proper libraries. If you access the inspector or developer console you'll see a slew of errors in your CodePen related to your not including Popper.js

Bootstrap 4 utilizes this library for pretty much everything that involves movement:

http://getbootstrap.com/docs/4.0/getting-started/introduction/#js

Once you include Popper.js between your jQuery and Bootstrap JS includes everything works as expected.

I would also point out that you're currently using 4.0.0-beta for Bootstrap, but the current version as of 12/28/17 is 4.0.0-beta.2 (with beta 3 coming out soon). Updating your include to reflect the most recent Bootstrap build might provide additional functionality.

Upvotes: 2

Related Questions