bootstrap scrollspy highlights last navigation link button after loading

StackOverflow https://stackoverflow.com/questions/11031955

Question

I've built a navigation bar at the top with 5 links. At the page itself I have added 5 sections with id's according to the name after the # tag in the element. The problem is that the last navigation link button is highlighted ('active' class was added to it on runtime in the beginning although in the code itself the first navbar item is set to "active". I have the latest bootstrap version which is v2.0.4 What is wrong ?

<div class="navbar" id="MenuBar">
    <div class="topHeadContentLogo"></div>
    <ul class="nav nav-pills" id="MenuUl">
        <li class="active"><a href="#Weekly">Weekly</a></li>
        <li class=""><a href="#Post">Post</a></li>
        <li class=""><a href="#Audience">Audience</a></li>
        <li><a href="#Website">Website</a></li>
        <li><a href="#FAQ">FAQ</a></li>
    </ul>
</div>

<div id="contentDiv">
    <section id="Weekly">
        <h1>weekly</h1>
    </section>

    <section id="Post">
        <h1>Post</h1>
    </section>

    <section id="Audience">
        <h1>Audience</h1>
    </section>

    <section id="Website">
        <h1>Website</h1>
    </section>

    <section id="FAQ">
        <h1>FAQ</h1>
    </section>
</div>



$('#MenuBar').scrollspy(); after document ready
Was it helpful?

Solution

have you added data-spy="scroll" to the <body> tag (or any other tag that's relevant)?

OTHER TIPS

If you have the data-spy set on the body element, make sure that the body element isn't set to height: 100%;. This was the problem in my case.

This was just happening to me, and I had data-spy="scroll" on an extra element inside the one I was trying to scroll (it was left over from something, shouldn't have been there). Removing this fixed the issue.

Latest bootstrap documentation suggests following

add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use

Via data-attributes

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

$(function () {
    $('#MenuUl a:first').tab('show');
  })

I hope that helps

This worked for me. I had added data-spy="scroll" both on body and the div I wanted to be spied on. Removing it solved this issue

had this same problem . Changed the bootstrap.min.js to bootstrap.js

seems like bootstrap minimized version makes your last identifier as active page.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top