Scrollspy navbar blocks content


I am having trouble getting my content to align properly under the fixed-top navbar with scrollspy.
Here’s my code

As you can see, the “About” header is blocked by the navbar. In addition to that, I am using scrollspy and if I click Projects or Contact on the navigation bar, it should jump to the corresponding header. However, the navbar blocks it again. How do I fix this?


Well the first issue can be solved by modifying your body css to:

body {
position: relative;
padding-top: 75px;

As for the scrollspy problems, you’re not alone. A lot of people are having troubles with bootstrap 4’s implementation of it.
What I gathered is that you need to set an attribute called “data-offset” to the body.

I suggest you start looking into bootstrap 4’s scrollspy data-offset. Just google it, and maybe you’ll find a working example. I couldn’t.


Thanks for the reply.

Been looking for a while and its hard to find a clear example for scrollspy. But I did manage to find this on w3schools

This approach seems to add a space above headers to account for the fixed-top navbar. I was hoping to looking for something forced, but this seems okay. I followed the w3schools example gave each of my header and its content their own div, and gave each of those divs a padding-top: 70px witht CSS.