bootstrap scrollspy highlights last navigation link button after loading

C

6

15

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

Carsoncarstensz answered 14/6, 2012 at 11:17 Comment(4)

post the html code of the nav and the js to call scrollspy()? – Livonia 14/6, 2012 at 11:23

@luca, edited. What am I doing wrong? – Carsoncarstensz 14/6, 2012 at 11:41

Strange, I'm having the same issue with the data attr added in the body tag. Any solution to this? – Lorenzalorenzana 16/7, 2012 at 17:55

I encountered the same issue, i did a jquery workaround by simply removing the "active" class on page load and adding it again to the first element instead of the wrong, like this: $('.post-index li.active').removeClass('active'); $('.post-index li:first-child').addClass('active'); – Dragonnade 16/11, 2016 at 21:19

L

4

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

Livonia answered 14/6, 2012 at 13:29 Comment(3)

Yes, I have added that tag, but still the last element is being activated on loading – Carsoncarstensz 20/6, 2012 at 8:52

have you tried adding enough content to the different sections, so that they do not all appear in your browser window at the same time? I've tried your code in a bootstrap page I've built and it seems to be all ok. I just added a lot of text to the sections to make sure that only one at time was displayed in my browser window. – Livonia 20/6, 2012 at 9:36

If you have a portofolio items on one section be sure you don't use filter to show only one category. It's a conflict. – Maduro 30/6, 2014 at 14:22

L

11

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.

Logographic answered 15/11, 2012 at 7:43 Comment(1)

How to use a sticky footer and a scrollspy then? – Almsman 5/11, 2013 at 1:1

L

4

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

Livonia answered 14/6, 2012 at 13:29 Comment(3)

Yes, I have added that tag, but still the last element is being activated on loading – Carsoncarstensz 20/6, 2012 at 8:52

have you tried adding enough content to the different sections, so that they do not all appear in your browser window at the same time? I've tried your code in a bootstrap page I've built and it seems to be all ok. I just added a lot of text to the sections to make sure that only one at time was displayed in my browser window. – Livonia 20/6, 2012 at 9:36

If you have a portofolio items on one section be sure you don't use filter to show only one category. It's a conflict. – Maduro 30/6, 2014 at 14:22

C

3

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.

Carriole answered 3/9, 2012 at 3:27 Comment(1)

thank you! This was my issue, and it drove me nuts. :) – Gurdwara 21/4, 2020 at 1:35

P

1

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

Pool answered 3/9, 2012 at 3:47 Comment(1)

Thank you, that helped.. I should have read it more clearly, skipped the intro and went to the using with JavaScript section too quick. – Pelham 5/5, 2013 at 19:23

T

0

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

Towline answered 7/10, 2014 at 11:34 Comment(0)

B

0

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

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

Boccie answered 7/3, 2016 at 21:43 Comment(1)

This didn't work for me. – Breather 11/8, 2023 at 8:52

Recommended topics

Hot tags