https://i.sstatic.net/5xcv9.png
My website alampk.com features a single page layout with a fixed navbar at the top. However, when I click on links like exp, portfolio, etc., the section moves to the top but a portion of 50px gets covered by the navbar. I have tried various CSS and jQuery solutions but none seem to resolve this issue.
I attempted using the following jQuery script:
$(".nav a").click(function(){
$(window).scrollTop($(window).scrollTop()-50);
});
// However, this executes before reaching the target section of the page
// The value -50 may not be accurate for the required positioning
In addition, I inserted a div above the navbar as shown below:
<div id="navPlaceHolder"></div>
// CSS
#navPlaceHolder{
height:50px;
visibility:hidden;
}
Unfortunately, this solution only works for the topmost section of the page.