Small formatting issues with bootstrap

Question

The website I'm working on: zarwanhashem.com

1. When I scroll the page scrolls too far. As in, the navbar covers up the first 50px of the page. How can I fix this? I tried adding -50 to the scrolling js but that messes up the navigation bar. As in, the wrong section gets selected in the navigation bar.

2. For the mobile version, when I select an option on the navigation menu it doesn't retract automatically. You have to collapse it yourself.

Scrolling js:

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');

        if($($anchor).closest('ul').hasClass('dropdown-menu')){
           $($anchor).closest('ul').parent().siblings().removeClass('active'); 
           $($anchor).closest('ul').parent().addClass('active'); 
        }else{
           $($anchor).parent().siblings().removeClass('active');
           $($anchor).parent().addClass('active');
        }
        event.preventDefault();
    });
});

js in file that adjusts page size so that the next section doesn't creep in from the bottom:

<script type="text/javascript">
    $(window).ready(function(){
    $('div[class^="content-section"]').css('min-height', $(window).height());
    })
  </script>

I don't really know javascript myself. I'd appreciate any help.

Answer 1

Try this code:

var elem = $(this);
$('html, body').animate({
    scrollTop: $(elem).offset().top - 80
}, 1500, 'easeInOutExpo');

Answer 2

You don't need JS to set the height, you can use pure CSS for that.

.content-section: min-height:calc(100% - 50px);

This should do the trick for you and allow 50px for the height of the navbar.