I am currently working on a single-page website with multiple sections. Users can navigate to these sections either by scrolling or by clicking on the navbar links. The issue I am facing is that the Bootstrap 4 navbar is fixed to the top, causing the content to be hidden beneath it. Is there a way to offset the anchors by -54px so that when a user clicks on a link, the content is displayed below the navbar (X:54px) instead of being covered by it (X:0px)?
I have created a CodePen to demonstrate the problem:
https://codepen.io/anon/pen/XEjaKv
When you click on a link, it takes you to the section but the navbar covers the text.
Each section has a height of 100 viewheight.
Here is the SCSS code I am using:
.container{
section{
height: 100vh;
&#section1{
margin-top: 54px; // We need to offset the first section by 54px because of the navbar.
}
&#section1, &#section3{
background-color: #ddd;
}
&#section2, &#section4{
background-color:#ccc;
}
}
}
html{
scroll-behavior:smooth;
}