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

Alexandros S.
Alexandros S.
8,261 Points
Posted by Alexandros S.
Alexandros S.
8,261 Points

Navbar page links

Isn't there some way to make it so you can also see the heading when clicking at its nav link?

Because when using the nav link to scroll to a part of the page with a heading (like in the video) the heading gets hidden by the fixed navbar.

4 Answers

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

You can do it with jquery and its going to animate a little bit feel free to play with it ;p

<script>
  $('.navbar a').not('first').on( 'click', function(){
     var offset = 80;
  $('body').animate( {
     scrollTop: $($(this).attr('href') ).offset().top - offset + 'px'
     }, 800);
  });
</script>

Include it at the bottom of the page after main jquery file

Yashwanth Yash
Yashwanth Yash
10,947 Points
Yashwanth Yash
Yashwanth Yash
10,947 Points

Works great. Can you please break and explain the code. How does this " scrollTop: " work? and you set the var offset to 80 . Is it 80px ?

Sherrie Gossett
Sherrie Gossett
14,924 Points

I like this effect, except for the short "flash" or flicker you see when clicking on the nav. This shows up for me in Safari and Chrome. Any ideas of how to do away with that? Thanks.

Gary Meade
Gary Meade
6,195 Points
Gary Meade
Gary Meade
6,195 Points

As always, Google is your friend! I did a search on this problem, looked through some solutions, and put together this little hack. Works beautifully.

Add this just below the link to bootstrap and just above the closing head tag:

<style>
   .fix-headers {
      padding-top: 70px; 
      margin-top: -70px;
   }
</style>

And then simply add fix-headers to the class for the first element in each linked section. eg.

<div id="about" class="row fix-headers">
Alexandros S.
Alexandros S.
8,261 Points
Alexandros S.
Alexandros S.
8,261 Points

Wow, thanks a lot. I'll be sure to try this out in my next project

Paul Yabsley
Paul Yabsley
46,713 Points
Paul Yabsley
Paul Yabsley
46,713 Points

You could wrap the section in another element, such as a div, and apply the id to that instead of the heading. Then add enough padding top to the div so that the fixed nav bar doesn't cover the title.

<div id="about" class="wrap">
    <h2>About</h2>
    <p>Section Content</p>
</div>

.fixed-nav {
    height: 40px;
}

.wrap {
    padding-top: 40px;
}
Paul Yabsley
Paul Yabsley
46,713 Points
Paul Yabsley
Paul Yabsley
46,713 Points

Actually, I'm not sure this is a good solution as you will end up with padding above your title at all times. Not just when you click on the nav link to go straight there.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

I was wondering exactly the same, thus I made some search about it, and found this really interesting solution, which in turn, linked me here. Both definitely worth reading, and searching about it (if you're somewhat like me, you may still not know some of this code).

I know that the MDN says that the scrollIntoView is still experimental technology, but truth is, for example, they give Chrome as one of the problematics, but I am testing it on Chrome first and foremost as it is my go-to browser. Apparently, after checking on caniuse, the problem is only with the smooth and it could be ignored, while they work on making it fully standardized.

Just for the sake of order, and thinking that maybe I will add more on it as I learn further, I created a JS folder and file, included that code mentioned above (shown below) there, and linked to it from the HTML file, under the CDN Bootstrap JS script.

var offset = 80;

$('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
});

HTH someone eventually.