What you’re trying to achieve here is impossible without Javascript.
You’ve changed the scrollTop
but you need to do it after some milliseconds to get it working, e.g:
$(".nav a").click(function(){
setTimeout(function() {
$(window).scrollTop($(window).scrollTop() - 50);
}, 10);
});
If you don’t want to wait those milliseconds, you can also prevent the default behavior and simulate it:
$(".nav a").click(function(e){
e.preventDefault();
var href = e.target.href, id = "#" + href.substring(href.indexOf("#") + 1);
$(window).scrollTop($(id).offset().top - 50);
});
Now, if you prefer a completely no-javascript solution, you’ll need to workaround by putting a padding-top
of 50px in each of your section
tags, so the title will be visible in the way you want to.
1
solved bootstrap fixed nav in single page site links issue