Correcting in page navigation position when using fixed navbar - html

Question

I am using a fixed navbar with bootstrap 4. When using fixed-top navbar, content below it is hidden by the navbar because its position is fixed. I had to give padding-top: 65px; on the body, to make the content appear below the navbar.
I have internal links so clicking on a navbar anchor positions the page on the section relative to it. However, because I used the padding-top trick, the position is 65px below the top of the section. Is there a way to solve it so that position returns to the top of the section?

Answer 1

You should not add from the first " fixed-nav" class. you can add this in scroll event of jquery.
$(window).on('scroll', function () {
var scrollTop = 20;
if ($(window).scrollTop() >= scrollTop) {
$('nav').addClass("fixed-nav");
}
if ($(window).scrollTop() < scrollTop) {
$('nav').removeClass('fixed-nav');
}
});
this add fixed-nav in user scroll down in your site.

Answer 2

On click of a link, I set the padding top of the body to 0, and on hash change event after the page positions on the section relative to the inline link, I set back the padding to 65.
$('.nav-link').click(function () {
$('body').css('padding-top', '0');
});
window.onhashchange = function () {
$('body').css('padding-top', '65px');
};

Answer 3

$(document).ready(function() {
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':+top_pad+'px'});
$(window).resize(function(){
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':top_pad+'px'});
}) ;
}) ;
This will make your first element after header, lie below header.