html - Small formatting issues with bootstrap -

html - Small formatting issues with bootstrap -

the website i'm working on: zarwanhashem.com

when scroll page scrolls far. in, navbar covers first 50px of page. how can prepare this? tried adding -50 scrolling js messes navigation bar. in, wrong section gets selected in navigation bar.

for mobile version, when select alternative on navigation menu doesn't retract automatically. have collapse yourself.

scrolling js:

//jquery collapse 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 adjusts page size next section doesn't creep in bottom:

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

i don't know javascript myself. i'd appreciate help.

you don't need js set height, can utilize pure css that.

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

this should trick , allow 50px height of navbar.

html css twitter-bootstrap-3