Bootstrap 4 Scrollspy not jumping to correct section, not showing entire section

I’ve been making a page for my son and used Bootstrap 4 this time. I am using sctollspy in the navbar and followed the instructions from When you click on a link in the navbar it jumps to the middle of the section, not the top part of that section.


html part of navbar and section

Leggacy Soccer Menu
Leggacy Soccer Logo

Welcome to Leggacy Soccer


My personal goal is to provide an opportunity to everyone who wants to thrive at developing their own skills and abilities.

My name is Alex Leggett and my prior experience includes coaching, refereeing, and playing 15 years (and counting). When I am not playing, I work as a substitute-teacher through the Dover NH School system. Private lessons are available to those interested regardless of age. (Recommended age: 5-16)

I will be donating $5 from every client towards the National Multiple Sclerosis Society logo

Alex Leggett

this is at the bottom of the html


css part
[code]body {
min-height: 75rem;
padding-top: 3.5rem;
position: relative;
font-family: Helvetica,Palatino, sans-serif;
color: #004289;
font-size: 20px;

.container {
background-color: #fff;

.section1 {
min-height: 100vh;
.section2 {
min-height: 100vh;
.section3 {
min-height: 100vh;
.section4 {
min-height: 100vh;


That’s a known issue of Bootstrap’s fixed navbar. It basically doesn’t compensate for its height covering part of your sections. Give some padding and negative margin to your sections (which are what the navbar is pointing to) and you should be set:

section {
    padding-top: 4rem;
    margin-top: -4rem;

Also, watch out, in your CSS you’re pointing to “.section1, .section2, etc” classes, but in your html you have ids on your sections.

thanks a lot, I will be back later

It’s fixed, I’m all set now, Thank you both for your help. I change .section to #section and linked it in the navbar like that. I also added the script from SkyC.