Bootstrap 4 - Scrollspy not working

Question

I have followed the documentation on how to use Scrollspy in BS4, but it is not working, so how do I solve it?

My body has posistion: relative

This is my body tag:

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

And this is the HTML for the navbar:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">

        <a class="navbar-brand" href="/">
            <img src="/images/logo_placeholder.jpg" width="90" height="45" class="d-inline-block align-top" alt="">
            Jalinen
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Nieuws</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Diensten</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Calamiteiten</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Gallerij</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Why is it not working?

Note:

Nothing works atm.

The navbar doesn't even stick to the top of the page.

Carol Skelly · Accepted Answer · 2018-07-28T13:14:16.040

5

Make sure you're using fixed-top to attach the navbar to the top,

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  ..
</nav>

and the body tag:

<body data-spy="scroll" data-target="#navbar1" data-offset="70">

Bootstrap 4 Scrollspy Demo

EDIT: navbar-toggleable-md has changed to navbar-expand-lg in Bootstrap 4.0.0

edited Jul 28 '18 at 13:14

answered Mar 05 '17 at 21:53

Carol Skelly

351,302
90
710
624

Yes, that fixed it. I already figuered it out myself, but will still accept this answer because it is the answer to my problem. – Luuk Wuijster Mar 06 '17 at 12:26
Bootstrap 4 scrollspy data-foofset not working with smooth scroll event. It work normally but solution not perfect. – Rahul Jan 02 '18 at 13:15
2

You downvoted this because it doesn't work with your custom smooth scroll event?? This answer works as described in the question above which has nothing to do with smooth scrolling. – Carol Skelly Jan 02 '18 at 19:59

score 2 · Answer 2 · answered Mar 04 '17 at 21:41

2

You content sections must have unique ID (#about) which is connected to an anchor in the navigation. (Your #home ID is valid only)

Correct:

            <li class="nav-item active">
                <a class="nav-link" href="#home">Home </a>
            </li>

Wrong:

            <li class="nav-item">
                <a class="nav-link" href="#">Nieuws</a>
            </li>

answered Mar 04 '17 at 21:41

Dražen

293
2
13

Yes, I know. But the navbar won't even stick to the top of my page in the first place. And after removing those that where wrong, it didn't work either – Luuk Wuijster Mar 04 '17 at 23:16

score 0 · Answer 3 · answered Jun 09 '20 at 12:21

0

My BS4 sticky-top navbar started scrolling up and disappeared when scrolling down. Removed the CSS below I added for some purpose and worked again.

body, html {
    height: 100%;
}

answered Jun 09 '20 at 12:21

Bart Uelen

1

score 0 · Answer 4 · edited Feb 21 '21 at 16:00

0

Bootstrap 3.3.7 puts the active class on the li element, and bootstrap 4 puts the active class on the a tag. Make sure to set styles accordingly.
For a sticky navbar, assign the class .fixed-top to the navbar.

edited Feb 21 '21 at 16:00

SherylHohman

16,580
17
88
94

answered Feb 21 '21 at 15:00

Keval

21
2

score 0 · Answer 5 · edited Apr 02 '21 at 07:25

0

Class active .active is the solution. Just add this to your css styles:

.nav-link.active {
background-color: white; 
color: #f4511e;           
}

That .active makes the difference. Change background-color and color at your will.

Also it is important to set:

body {position: relative}

edited Apr 02 '21 at 07:25

Cosmin Staicu

1,809
2
20
27

answered Apr 01 '21 at 11:15

Ilija Radovanović

1
2

Bootstrap 4 - Scrollspy not working

5 Answers5

Linked