I am having trouble getting my content to align properly under the fixed-top navbar with scrollspy.
Here’s my code https://codepen.io/dli2614/pen/MvjxeG?editors=1000
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 https://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp
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.