Twitter Bootstrap - Scrollspy ignore ID

Question

I have a navigation on my site where the last link opens a modal. Scrollspy is working fine but I don't want it to highlight the last element that opens the modal in any case.

Is there any way to do so?

    <nav>
        <ul class="nav">
            <li class="current">
                <a href="#home">Home</a>        
            </li>
            <li>
                <a href="#leistungen">Leistungen</a>        
            </li>
            <li>
                <a href="#">Preise</a>
            </li>
            <li>
                <a href="#">Referenzen</a>
            </li>
            <li>
                <a href="#contact" data-toggle="modal">Kontakt</a>      
            </li>
        </ul>
    </nav>

please post your code, in particular an example of the markup and the js code used. otherwise it's very difficult to help you — Mangiucugna, Jul 08 '13 at 09:42
uses twitter bootstraps scrollspy.js //http://twitter.github.io/bootstrap/javascript.html#scrollspy — Stantastic Stan Richter, Jul 08 '13 at 10:06
the problem is not within the scrollspy plugin but with the navs component, it automatically add the "current" class to the clicked li element. Try to change the current class in the css — Mangiucugna, Jul 08 '13 at 10:10
the 'current' class is commented out atm. scrollspy ads 'active' to the element this is working as i've said above the problem i have is that the last link opens the modal. i don't want it to recognize it or i want it to exclude it from scrollspy — Stantastic Stan Richter, Jul 08 '13 at 10:18
After some testing i was able to fix it myself. Scrollspy is targeting 'nav li a' so i just wrapped the i wanted to exclude in a div et voila scrollspy cant find it anymore... — Stantastic Stan Richter, Jul 08 '13 at 11:54

score 0 · Answer 1 · edited May 23 '17 at 12:31

I've found a solution without adding extra markup, but this is not so beautiful.

The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted.

I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version.

A solution for your problem may be :

<nav>
    <ul class="nav">
        <li class="current">
            <a href="#home">Home</a>        
        </li>
        <li>
            <a href="#leistungen">Leistungen</a>        
        </li>
        <li>
            <a href="#">Preise</a>
        </li>
        <li>
            <a href="#">Referenzen</a>
        </li>
        <li>
            <a data-toggle="modal" data-target="#contact">Kontakt</a> <!-- See http://getbootstrap.com/javascript/#modals-usage -->
        </li>
    </ul>
</nav>

Unfortunately it is not working for me. The active item is flickering on scrolling in my example. — Thomas, Apr 18 '14 at 18:30

Twitter Bootstrap - Scrollspy ignore ID

1 Answers1