Search code examples
twitter-bootstrapnavigationscrollspy

Bootstrap scrollspy navigation not working in fixed navbar

I use a bootstrap navigation here: https://bm-translations.de/km

I set the following like official manual, to automatically updateBootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. But it doesnt work:

body {
  position: relative;
}

<body data-spy="scroll" data-target="#myNavbar">

Why is this not working? What am I doing wrong?

Solution

  • The problem is the absolute urls in the nav links. They should contain only the hash instead of the full url..

    <a itemprop="url" href="#video">

    If you must use the absolute url, you can specify the Scrollspy anchors in the data-target instead...

    <ul class="nav navbar-nav">
    <li class="" itemprop="name"><a itemprop="url" href="https://bm-translations.de/km#video" data-target="#video">Leistungen</a>
        <ul>
            ..
        </ul>
    </li>
    <li itemprop="name" class="active"><a itemprop="url" href="https://bm-translations.de/km#ueber-mich" data-target="#ueber-mich">Über mich</a>
    </li>
    <li itemprop="name" class=""><a itemprop="url" href="https://bm-translations.de/km#kosten" data-target="#kosten">Preise</a>
    </li>
    <li itemprop="name" class=""><a itemprop="url" href="https://bm-translations.de/km#kontakt" data-target="#kontakt">Kontakt</a></li>
</ul>