Navigation not updating with Bootstrap ScrollSpy

Question

Navigation not updating with Bootstrap ScrollSpy

606 views Asked by Michael Ruta At 24 November 2024 at 22:37

I can't get my navigation items to show as "active" using bootstrap ScrollSpy. I've included bootstrap.js (Bootstrap v4.0.0-alpha.5) and jquery.min.js (3.1.1).

I have set the data-spy and data-target in the body element as follows;

<body data-spy="scroll" data-target=".navbar">

My nav section looks as follows;

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand page-scroll" href="#page-top">Logo Here</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse66" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse66">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="page-scroll" href="#page-top">About</a></li>
                <li><a class="page-scroll" href="#section-portfolio">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

The links #page-top and #section-portfolio work fine for scrolling to the right section, but for some reason the navigation elements are not becoming "active". Any ideas? Thanks -- Michael

Original Q&A

There are 1 answers

**vanburen** · Accepted Answer · 2016-12-18 07:09:24

You're markup represents Bootstrap Version 3 while your using the assets (CSS and Javascript) for Version 4. They aren't interchangeable generally speaking. You'll need/want to change your markup to reflect v4 if that's what you intend to use.

v4.0.0-alpha.5 Navbar vs v3.3.7 Navbar

Working v4 Example:

body {
  position: relative;
}
section {
  padding: 100px 50px 50px;
  height: 750px;
}
#about {
  background: #ffebee;
}
#projects {
  background: #f44336;
}
#contact {
  background: #d32f2f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".navbar">

  <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav float-xs-right">
      <li class="nav-item">
        <a class="nav-link" href="#about">About <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

  <section id="about">
    <h1>About</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="projects">
    <h1>Projects</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="contact">
    <h1>Contact</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

</body>

Working v3 Example:

body {
  position: relative;
}
section {
  padding: 100px 50px 50px;
  height: 750px;
}
#about {
  background: #ffebee;
}
#projects {
  background: #f44336;
}
#contact {
  background: #d32f2f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".navbar">

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Logo Here</a>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">About</a>
          </li>
          <li><a href="#projects">Projects</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

  <section id="about">
    <h1>About</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="projects">
    <h1>Projects</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="contact">
    <h1>Contact</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

TechQA.

Navigation not updating with Bootstrap ScrollSpy

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in SCROLLSPY

Popular Questions

Popular Tags

Trending Questions