<!-- HTML5 -->

<header>
  <nav>
    <ul>
      <li class="logo"><a href="#"><img src="img/logo.png" alt="" /></a></li>
      <li><a href="#">Link 1 ▼</a>
        <ul>
          <li><a href="#">Sub Link 1</a></li>
          <li><a href="#">Sub Link 2</a></li>
          <li><a href="#">Sub Link 3</a></li>
          <li><a href="#">Sub Link 4</a></li>
          <li><a href="#">Sub Link 5</a></li>
        </ul>
      </li>
      <li><a href="#">Link 2 ▼</a>
        <ul>
          <li><a href="#">Sub Link 1</a></li>
          <li><a href="#">Sub Link 2</a></li>
          <li><a href="#">Sub Link 3</a></li>
          <li><a href="#">Sub Link 4</a></li>
          <li><a href="#">Sub Link 5</a></li>
        </ul>
      </li>
      <li><a href="#">Link 3 ▼</a>
        <ul>
          <li><a href="#">Sub Link 1</a></li>
          <li><a href="#">Sub Link 2</a></li>
          <li><a href="#">Sub Link 3</a></li>
          <li><a href="#">Sub Link 4</a></li>
          <li><a href="#">Sub Link 5</a></li>
        </ul>
      </li>
      <li><a href="#">Link 4 ▼</a>
        <ul>
          <li><a href="#">Sub Link 1</a></li>
          <li><a href="#">Sub Link 2</a></li>
          <li><a href="#">Sub Link 3</a></li>
          <li><a href="#">Sub Link 4</a></li>
          <li><a href="#">Sub Link 5</a></li>
        </ul>
      </li>
      <li class="logo-moblie"><a href="#"><img src="img/logo.png" alt="" /></a></li>
      <li class="nav-small"><a href="#"><img src="img/navimg.png" alt="" /></a></li>
    </ul>
  </nav>
</header>
<div class="containter">
  <article>
    <p>Your main content goes in here</p>
  </article>
  <footer>
    <p>Your footer content goes in here</p>
  </footer>
</div>

/* Includes CSS Reset */

---

li.logo a:link, li.logo a:visited,
  li.nav-small a:link, li.nav-small a:visited {
    padding: 0;
    width: 100%;
    text-align: right;
  }

  li.logo-moblie a:link, li.logo-moblie a:visited {
    text-align: left;
  }

  li.logo-moblie a:link, li.logo-moblie a:visited {
    width: 87%;
    padding: 0 6.5%;
    float: left;
  }

  li.logo a:hover, li.logo a:active, li.logo a:focus,
  li.nav-small a:hover, li.nav-small a:active, li.nav-small a:focus,
  li.logo-moblie a:hover, li.logo-moblie a:active, li.logo-moblie a:focus {
    color: #00ff16;
    background: none;
  }

  .logo img, li.logo-moblie img {
    width: 100%;
    max-width: 70px;
  }

  .logo {
    display: none;
  }

  .nav-small img {
    height: 50px;
    width: 50px;
  }

  .nav-small a {
    float: left;
  }

  .logo-moblie, .nav-small {
    width: 50%;
  }

  .logo-moblie:hover, .nav-small:hover, .logo:hover {
    background: none;
  }

  header {
    width: 100%;
    background: white;
    float: left;
    border-bottom: 5px double #00ff16;
  }
  header nav {
    width: 100%;
    max-width: 1000px;
    background: white;
    margin: 0 auto;
    -webkit-transition: all, 0.5s;
    -moz-transition: all, 0.5s;
    -ms-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
  }
  header nav ul {
    float: left;
    width: 100%;
  }
  header nav ul li {
    float: left;
    width: 100%;
  }
  header nav ul li a:link, header nav ul li a:visited {
    width: 94%;
    display: block;
    padding: 1.15em 3%;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-family: "SourceSansProLight", helvetica, arial, sans-serif;
    font-size: 1em;
    -webkit-transition: color, background 0.25s;
    -moz-transition: color, background 0.25s;
    -ms-transition: color, background 0.25s;
    -o-transition: color, background 0.25s;
    transition: color, background 0.25s;
  }
  header nav ul li a:hover, header nav ul li a:active, header nav ul li a:focus {
    color: #111;
    background: #00ff16;
  }
  header nav ul li ul {
    background: #ddd;
    display: none;
  }
  header nav ul li:hover {
    background: #00ff16;
  }
  header nav ul li:hover ul, header nav ul li:focus ul {
    display: block;
  }

  .smallnavjs {
    margin-top: -12.6em;
  }

  @media screen and (min-width: 540px) {
    .smallnavjs {
      margin-top: 0 !important;
    }

    li.nav-small {
      display: none;
    }

    li.logo-moblie {
      display: none;
    }

    .logo {
      display: block;
      width: 93.5%;
      padding: 0 3.25%;
    }

    li.logo a:link, li.logo a:visited {
      text-align: center;
    }

    header nav {
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
    }
    header nav ul {
      margin: 1em 0 0 0;
    }
    header nav ul li {
      width: 25%;
      position: relative;
    }
    header nav ul li ul {
      position: absolute;
      top: 2.3em;
    }
    header nav ul li ul li {
      width: 100%;
    }
  }
  @media screen and (min-width: 800px) {
    .logo {
      width: 20%;
      padding: 0;
    }

    li.logo a:link, li.logo a:visited {
      text-align: left;
    }

    header nav ul {
      width: 93.5%;
      margin: 0 3.25%;
    }
    header nav ul li {
      width: 20%;
    }
    header nav ul li ul {
      top: 3.3em;
      margin: 0;
      width: 100%;
    }
  }

// Latest Jquery 1.X.X

$(document).ready(function() {
    $('header nav').addClass('smallnavjs');
    $('.nav-small').click(function(){
        $('header nav').toggleClass('smallnavjs');
    });
});