<!-- 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 */

---

*, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

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: 100%;
  padding: 0 6.5%;
  float: left;
}

li.logo-moblie, li.nav-small {
  padding: .5em;
}

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

header {
  width: 100%;
  background: #262626;
  float: left;
}
header nav {
  width: 100%;
  background: #262626;
  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: 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: 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: #262626;
  background: #1fd100;
}

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

@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: 100%;
    padding: .5em 3.25%;
  }

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

  header nav {
    margin: 0 auto;
    width: 100%;
  }
  header nav ul {
    margin: 0em 0 0 0;
  }
  header nav ul li {
    width: 25%;
  }
}
@media screen and (min-width: 800px) {
  .logo {
    width: 11.11111%;
    padding: 1em 0;
  }

  header nav ul li {
    width: 11.11111%;
  }
  header nav ul li a:link, header nav ul li a:visited {
    padding: 2.15em 3%;
  }
}

// Latest Jquery 1.X.X

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