<header id="masterHeader">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
    <a id="menu" href="#">Nav</a>
  </nav>
  <h1><a href="">Arlina Design</a></h1>
</header>

@import url(https://fonts.googleapis.com/css?family=Lora);

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

html, body, div,
h1, h2, h3, h4, h5, h6,
ul, li, ol, ul, p, img {
  margin:0;
  padding:0;
}

body {
  line-height: 1;
  font-size: 100%;
  font-family: 'Lora', serif;
  line-height: 1.65;
}

a {
  text-decoration: none;
  font-weight: bold;
  text-decoration: none;
}

li {
  list-style: none;
}

#masterHeader {
  font-family: 'Roboto', sans-serif;
  background: #f35d5c;
  overflow: hidden;
  transition: .4s;
  margin-top: -15.875em;
}

header a {
  color: #fff;
}

h1 {
  float: left;
  font-size: 1.25em;
  line-height: 3em;
  margin-left: 5%;
  text-transform: uppercase;
}

#menu {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNnB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNiAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjYgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIyNiIgaGVpZ2h0PSI0Ii8+PHJlY3QgeT0iOCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjI2IiBoZWlnaHQ9IjQiLz48cmVjdCB5PSIxNiIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjI2IiBoZWlnaHQ9IjQiLz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=);
  float: right;
  width: 1.625em;
  height: 1.25em;
  margin: 1.25em 5% 1.25em 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

nav {
  text-align: center;
  background: #323440;
}

nav ul li {
  border-bottom: 1px dashed #474a5a;
}

nav ul li:last-child {
  border: none;
}

nav ul a {
  display: block;
  padding: 0.75em 0;
  transition: .1s;
}

nav ul a:hover {
  background: #2a2c36;
}

.show {
  margin-top: 0!important;
}

// Menu button element
var menu = document.getElementById('menu')

// Header element
var header = document.getElementById('masterHeader')

// Nav element
var nav = document.getElementsByTagName('nav')[0]

// Toggle class
function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

// Toggles show
menu.onclick = function() {
    toggleClass(header, 'show');
};

// Calculates
var height = "-" + nav.clientHeight + "px"

// Add negitive margin
header.style.marginTop = height