Navbar Fixed To top without content under

Question

I'm trying to setup a sticky navbar on a site for a school project. Here: http://www.divisionforty.com/aloevera/

I don't want the content to go underneath it, what I mean is that when it scrolls content sits underneath it like if it was positioned absolute.

Hope someone can help,

Denver

Answer 1

Give padding-top to .wrapper class. You can give padding-top:100px if you don't want to hide the content under navbar. See this example.

Update:

Please give .offset().top -100 100 is the height of the navbar in your javascript as below:

$("#circlediv").click(function() {
 $('html, body').animate({
     scrollTop: $("#benefits").offset().top-100
 }, 2000);
});

and

 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 100
        }, 1000);
        return false;
      }
    }
  });
});