<!-- HTML5 -->

<header>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li class="logo"><a href="#"><img src="img/logo.png" alt="" /></a></li>
            <li><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
            <li><a href="#">Link 7</a></li>
            <li><a href="#">Link 8</a></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>
        <!-- Content goes here -->
    </article>
    <footer>
        <!-- Content goes here -->
    </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;
}

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

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%;
}

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;
}

header {
  background: #262626;
}
header nav {
  margin: 0 auto;
  width: 100%;
  -webkit-transition: all, 0.25s;
  -moz-transition: all, 0.25s;
  -ms-transition: all, 0.25s;
  -o-transition: all, 0.25s;
  transition: all, 0.25s;
}
header nav ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}
header nav ul li {
  -webkit-box-flex: 0 1 50%;
  -moz-box-flex: 0 1 50%;
  -webkit-flex: 0 1 50%;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%;
}
header nav ul li a:link, header nav ul li a:visited {
  width: 100%;
  display: block;
  padding: 1.15em 3%;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-family: "SourceSansProLight", helvetica, arial, sans-serif;
  font-size: 1em;
  -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 li a:hover, header nav ul li a:active, header nav ul li a:focus {
  color: #111;
  background: #00ff16;
}

li.nav-small, li.logo-moblie {
  margin: 1em 0 0 0;
}

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

@media screen and (min-width: 540px) {
  li.nav-small {
    display: none;
  }

  .logo {
    display: block;
    -webkit-box-flex: 1 1 100%;
    -moz-box-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
  }

  li.logo-moblie {
    display: none;
  }

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

  li.logo a:link, li.logo a:visited {
    text-align: center;
    margin: 0 0 .5em 0;
    padding: .75em 0;
  }

  header {
    padding: 0;
  }
  header nav ul li {
    -webkit-box-flex: 1 1 25%;
    -moz-box-flex: 1 1 25%;
    -webkit-flex: 1 1 25%;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
  }
}
@media screen and (min-width: 800px) {
  li.logo a:link, li.logo a:visited {
    margin: .5em 0 .25em;
  }

  .logo {
    display: block;
    -webkit-box-flex: 1 1 10%;
    -moz-box-flex: 1 1 10%;
    -webkit-flex: 1 1 10%;
    -ms-flex: 1 1 10%;
    flex: 1 1 10%;
  }

  header {
    padding: 0;
  }
  header nav ul {
    width: 100%;
  }
  header nav ul li {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  header nav ul li a:link, header nav ul li a:visited {
    padding: 2.25em 3% 2.15em;
  }
}

// Latest Jquery 1.X.X

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