Hamburgar menu

by rupesx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- header -->
  <header class="h-topFixed homepage">
    <div class="container">
      <div class="navbar">
        <div class="navbar-header"><h1 class="slink"><a href="#home" class="logo active"><img src="//d3il3io2zwkpt9.cloudfront.net/web/images/header-logo-1group.png" alt="Placeholder" class="img-responsive"></a></h1></div>
        <div id="nav-trigger" class="navbar-toggle">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <nav id="nav-main" class="navbar-right">
          <ul>
            <li class="slink"><a href="#about">about</a></li>
            <li><a href="/careers">careers</a></li>
            <li class="slink"><a href="#contact">contact us</a></li>
            <li><a href="" class="playStore download-app-btn" id="psButton1">download the app <span class="icon download"></span></a></li>
          </ul>
        </nav>
        <nav id="nav-mobile"></nav>
      </div>
    </div>
  </header>
  <!-- / header --> 
  <div style="height: 3500px">
      content;
  </div>

CSS

body{
background: #333;
}

*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

.h-topFixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    -webkit-transition: top 0.8s ease 0s;
    -moz-transition: top 0.8s ease 0s;
    -ms-transition: top 0.8s ease 0s;
    -o-transition: top 0.8s ease 0s;
    transition: top 0.8s ease 0s
}
.toggleClr,
.fixToggleClr {
    background-color: #7c71e5;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    -moz-box-shadow: #37326e 0 0px 2px;
    -webkit-box-shadow: #37326e 0 0px 2px;
    box-shadow: #37326e 0 0px 2px
}
.toggleClr .navbar-header .logo,
.fixToggleClr .navbar-header .logo {
    width: 180px;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    margin: 5px 0 0
}
.toggleClr .navbar,
.fixToggleClr .navbar {
    margin: 12px 0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}
.toggleClr nav,
.fixToggleClr nav {
    margin-bottom: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}
.toggleClr nav#nav-main,
.fixToggleClr nav#nav-main {
    padding: 10px 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out
}
.navbar {
    margin: 40px 0 0
}
.navbar-header...

JavaScript

var $window = $(window);


$(document).ready(function(){
  
//navigation
$("#nav-mobile").html($("#nav-main").html());
$("#nav-mobile li a").click(function(){
    $('#nav-trigger').removeClass('open active');
    $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(300);
     $(".h-topFixed").removeClass('mob-nav');
  });
  $("#nav-trigger").click(function(){
      if ($("nav#nav-mobile ul").hasClass("expanded")) {
        $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(300);
        $(this).removeClass("open");
        $(this).removeClass("active");
        $(".h-topFixed").removeClass('mob-nav');
      } else {
        $("nav#nav-mobile ul").addClass("expanded").slideDown(300);
        $(this).addClass("open");
        $(this).addClass("active");
        $(".h-topFixed").addClass('mob-nav');
      }
});

        
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
  var $anchor = $(this);
  $(document).off("scroll");
  $('a').each(function () {
    $(this).removeClass('active');
  })
  $(this).addClass('active');
  $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top - menuheight
  }, 1000, 'easeInOutSine', function () {
  });
   e.preventDefault();
});


$(window).scroll(function() {
if ($(".h-topFixed").offset().top > 100) {
  $(".h-topFixed").addClass("toggleClr");
  
}
else {
  $(".h-topFixed").removeClass("toggleClr"); 
}
});

if ($(".h-topFixed").offset().top > 100) {
  $(".h-topFixed").addClass("toggleClr");
}
else {
  $(".h-topFixed").removeClass("toggleClr"); 
}

});