Menu
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.
881
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
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
