<div class="headline-container">
  <h1 class="headline">RESPONSIVE NAV</h1>
</div>
<div class="nav-wrapper">
  <div class="nav-menu">
    <div class="nav-cross"><span></span></div>
  </div>
  <ul class="navbar">
    <li class="nav-button"><a href="#">home</a></li>
    <li class="nav-button"><a href="#">about</a></li>
    <li class="nav-button"><a href="#">images</a></li>
    <li class="nav-button"><a href="#">contact</a></li>
  </ul>
</div>

@import "bourbon";
@import "neat";
@import url(https://fonts.googleapis.com/css?family=Karla:700);
$display-type: 'Karla';
$maxwidth: 580px;


$black: #00011c;
$white: #f4f4f5;
$pink: #ff46d6;

html {
  background-color: $black;
}

.headline-container {
    margin-top: 32px;
    width: 100%;
    text-align: center;
}

.headline {
    margin: 0;
    color: $pink;
    font-size: 10vw;
    font-family: $display-type;
    @include media(1200px) {
        font-size: 120px;
  }}

.nav-wrapper {
    width: 90%;
    max-width: 1000px;
    position: relative;
    font-size: 20px;
    height: auto;
    margin: 0 auto;
    border-top: 1px solid $white;
    border-bottom: 1px solid $white;
}

.navbar {
    margin: 0 auto;
    display: table;
    padding: 0;
    height: auto;
    text-align: center;
  @include media(max-width $maxwidth){
    display: none;
  }
}

.nav-button {
    display: inline-block;
    width: 90px;
    height: 35px;
    margin-right: 45px;
    @include media(max-width $maxwidth){
        display: block;
        width: 100%;
    }
    &:last-child {
        margin-right: 0;
    }
    &:hover {
        @include transition(background-color 0.3s ease-out);
        background-color: tint($black, 40%);
        text-shadow: 0px 2px 2px $black;
    }
}

.nav-button a {
    font-family: $display-type;
    text-align: center;
    line-height: 1.8em;
    color: $white;
    text-decoration: none;
}

.nav-menu {
    @include media(max-width $maxwidth){
        display: block;
        height: 1.75em;
        }
}

.nav-cross{
  display: none;
  margin: auto;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
  @include media(max-width $maxwidth){
    display: block;}
}

.nav-cross span, .nav-cross span:after {
  cursor: pointer;
  margin: auto;
  margin-top: 25px;
  height: 7px;
  width: 30px;
  background: white;
  position: relative;
  display: block;
  content: '';
  @include transition(all 200ms ease-in-out);
}

.nav-cross span:after {
  @include transform(rotate(90deg));
}

.clicked {
  @include transform(rotate(135deg));
}

var delay = 200;
var maxWidth = 580;
var curWidth = 0;
var newWidth = 0;

$(document).ready(function(){
  var curWidth = $(window).width();
});

$(".nav-menu").click(function() {
  $(".navbar").toggle("drop", { direction: "up" }, delay).delay(delay);
  $(".nav-cross span").toggleClass("clicked");
});

$(window).resize(function(){
  
  var newWidth = $(window).width();
  
  if (newWidth > maxWidth){
    $(".navbar").css("display", "table");
    if ($(".nav-cross span").hasClass("clicked")){
      $(".nav-cross span").removeClass("clicked");
    }
  }
  else if (curWidth > maxWidth){
      $(".navbar").css("display", "none");
  }
  
  curWidth = newWidth;
});