Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Using ScrollSpy to Highlight Nav Links

Posted by Sarah Montoro
Sarah Montoro
843 Points

Why won't Scrollspy work? Each section is given a proper correlating id, so I don't see what the problem is.

Can anyone tell me why it won't work? I feel liked I've tried everything. 

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

<!-- nav-->  
<nav class="navbar navbar-expand-lg navbar-light navbar-toggleable-xl bg-primary fixed-top">
  <div class="container">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link text-white" href="#home">Home</a>
      <a class="nav-item nav-link text-light" href="#about">About</a>
      <a class="nav-item nav-link text-light" href="#speakers">Speakers</a>
      <a class="nav-item nav-link text-light" href="#schedule">Schedule</a>
    </div>
  </div>
   <a class="hidden-xs-down navbar-brand text-white" href="#">Presented by Treehouse</a>
   </div>
</nav>
Robert Howington
Robert Howington
1,787 Points
Robert Howington
Robert Howington
1,787 Points

What exactly isn't working. The offset? Or the basic highlighting of the navbar list-item text when you get to those sections?

Sarah Montoro
Sarah Montoro
843 Points

The highlighting of the navbar list-item text when I get to those sections.

2 Answers

Weston Cox
Weston Cox
7,036 Points
Weston Cox
Weston Cox
7,036 Points

Sarah Montoro - I'm having the same exact problem. I cannot get Scrollspy to work, as in highlighting the link in the nav bar, at all. Has anything changed with Bootstrap4 beta recently regarding Scrollspy? I read the current documentation on Scrollspy and am stumped as to why I cannot get it to work.

Sarah Montoro
Sarah Montoro
843 Points

I wish I had a solution for you, but I still haven't found one, even after trying some suggestions people gave me in Stack Overflow. I'm in a coding bootcamp so I'll my mentor about it. I'm determined to get to the bottom of this...

Weston Cox
Weston Cox
7,036 Points
Weston Cox
Weston Cox
7,036 Points

Sounds great! Good luck and when you find out, come back and let us know - Thanks Sarah!