<header>
        <div class="container">
          <nav id="navigation">
            <a href="#" class="logo">Jan Czizikow</a>
            <a aria-label="mobile menu" class="nav-toggle">
              <span></span>
              <span></span>
              <span></span>
            </a>
              <ul class="menu-left">
                <li><a href="#about">About</a></li>
                <li><a href="#exp">Resume</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
          </nav>
        </div>
      </header>

<section id="about">
<div class="container">
  <h1>Fully responsive navigation</h1>
  <p>Mobile hamburger menu with css3 animations, animated links on hover, hide navigation on scroll down / show on scroll up (<a href="https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c#.xnr8amvlw">credit to Marius Craciunoiu</a>)</p>
  <p class="signature">Made with ♥ by <a href="http://www.janczizikow.com/"> Jan Czizikow</a></p>
  </div>
</section>

<section id="exp">
  <div class="container">
  <h1>Resume</h1></div>
</section>

<section id="skills">
  <div class="container">
  <h1>skills</h1></div>
</section>

<section id="projects">
  <div class="container">
  <h1>projects</h1></div>
</section>

<section id="contact">
  <div class="container">
  <h1>contact</h1></div>
</section>

@import "compass/css3";
@import "susy";
@import "breakpoint";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  box-sizing: border-box;
}
body {
  padding: 50px;
  background-color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

section {
  height: 100vh;
  &#about {
    text-align: center;
  }
  h1 {
    text-align: center;
  }
}
// Breakpoints
$xs: 0;
$sm:576px;
$md:768px;
$lg:992px;
$xl:1200px;
// CONTAINER

// Container
.container {
  padding: 0px 15px 0px 15px;
  @include breakpoint($xs) {
    @include container(auto);
  }
  @include breakpoint($sm) {
    @include container(540px);
  }
  @include breakpoint($md) {
    @include container(720px);
  }
  @include breakpoint($lg) {
    @include container(960px);
  }
  @include breakpoint($xl) {
    @include container(1170px);
  }
}

$text-color: #000;

// LINKS RESET
a {
  text-decoration: none;
  color: rgba(34, 34, 34, .8);
  &:hover, :focus {
    color: darken(#000, 20%);
  }
}
// LINKS IN MENU EFFECT
.menu-left a {
  display: inline-block;
  position: relative;
  padding-bottom: 0px;
  transition: color .35s ease;
  &:before {
    content: '';
    display:block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    transition: width 0s ease, background .35s ease;
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: $text-color;
    transition: width .35s ease;
  }
  &:hover:before {
    width: 100%;
    background: $text-color;
    transition: width .35s ease;
  }
  &:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
  }
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: .5rem 0;
  background: rgba(255, 255, 255, .92);
  z-index: 3;
  will-change: transform;
  transition: background .3s,
  -webkit-transform .5s cubic-bezier(.694,.048,.335,1);
  transition: transform .5s cubic-bezier(.694,.048,.335,1),background .3s;
  transition: transform .5s cubic-bezier(.694,.048,.335,1),background .3s,
  -webkit-transform .5s cubic-bezier(.694,.048,.335,1);
  transform: translateY(0);
  -webkit-transform: translateY(0);
  nav {
    .logo {
      float: left;
      padding-top: .25rem;
      padding-bottom: .25rem;
      margin-right: 1rem;
      font-size: 1.25rem;
      line-height: inherit;
      font-weight: 500;
      color: black;
      &:after {
        content: '';
        display: table;
        clear: both;
      }
    }
    ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
      li {
        float: none;
        margin-left: 0;
        @include breakpoint($md) {
          float: left;
          margin-left: 1rem;
        }
        a {
          display: block;
        @include breakpoint($sm) {
          display: block;
          padding: .425rem 0rem;
        }
        }
      }
    }
  }
}
@media(max-width: 768px) {
  ul {
    clear: both;
    li {
      padding: .5em 0;
    }
  }
}

.hide-nav {
  transform: translateY(-120%!important);
  -webkit-transform: translateY(-120%)!important;
}

ul.menu-left {
  display: block;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 10;
  @include breakpoint($md) {
    display: block!important;
    float: right;
    max-height: none;
  }
  &:before {
    content: '';
    display: table;
    clear: both;
  }
  &.collapse {
    max-height: 15em!important;
  }
}

// Burger
.nav-toggle {
  display: block;
  border-radius: 5px;
  background-color: transparent;
  float: right;
  height: 38px;
  width: 38px;
  cursor: pointer;
  padding: 8px 8px;
  &.open span:first-child {
    transform: rotate(45deg) translate(4.4px, 4.4px);
  }
  &.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }
  &.open span:last-child {
    transform: rotate(-45deg) translate(4.4px, -4.4px);
  }
  @include breakpoint($md) {
    display: none;
  }
  span {
    position: relative;
    display: block;
    height: 2px;
    width: 100%;
    margin-top: 4px;
    background-color: $text-color;
    transition: all .25s;
  }
}

.signature {
	position: fixed;
	font-weight: 100;
	bottom: 10px;
  color: $text-color;
	left: 0;
	letter-spacing: 4px;
	font-size: 10px;
	width: 100vw;
  text-align: center;
	text-transform: uppercase;
  text-decoration: none;
}

// NAVIGATION LOGO SCROLL TOP
$('.logo').on('click', function(e) {
  e.preventDefault();
  $('.nav-toggle').removeClass('open');
  $('.menu-left').removeClass('collapse');
  $('html, body').animate({
    scrollTop: 0
  }, 750, 'easeInOutQuad')
});
// LINKS TO ANCHORS
$('a[href^="#"]').on('click', function(event) {

  var $target = $(this.getAttribute('href'));

  if($target.length) {
    event.preventDefault();
    $('html, body').stop().animate({
      scrollTop: $target.offset().top
    }, 750, 'easeInOutQuad');
  }
});

// TOGGLE HAMBURGER & COLLAPSE NAV
$('.nav-toggle').on('click', function() {
  $(this).toggleClass('open');
  $('.menu-left').toggleClass('collapse');
});
// REMOVE X & COLLAPSE NAV ON ON CLICK
$('.menu-left a').on('click', function() {
  $('.nav-toggle').removeClass('open');
  $('.menu-left').removeClass('collapse');
});

// SHOW/HIDE NAV

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('show-nav').addClass('hide-nav');
        $('.nav-toggle').removeClass('open');
        $('.menu-left').removeClass('collapse');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('hide-nav').addClass('show-nav');
        }
    }

    lastScrollTop = st;
}