<!-- HTML5 -->

<div class="containter">
    <header>
        <nav>
            <ul>
                <li class="logo"><a href="#"><img src="logo.png" alt="" /></a></li>
                <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-moblie"><a href="#"><img src="logo.png" alt="" /></a></li>
                <li class="nav-small"><a href="#"><img src="navimg.png" alt="" /></a></li>
            </ul>
        </nav>
    </header>
    <article>
        <!-- Content goes here -->
    </article>
    <footer>
        <!-- Content goes here -->
    </footer>
</div>

/* Includes CSS Reset */

---

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

li.logo-moblie a:link, li.logo-moblie a:visited {
  width: 93.5%;
  margin: 0 0 0 6.5%;
}

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

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 nav {
  max-width: 1000px;
  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: center;
  -moz-justify-content: center;
  justify-content: center;
}
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%;
  text-align: center;
  display: block;
  padding: .75em 0;
  text-decoration: none;
  font-family: "SourceSansProLight", helvetica, arial, sans-serif;
  color: #000;
  -webkit-transition: all, 0.5s;
  -moz-transition: all, 0.5s;
  -ms-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
header nav ul li a:hover, header nav ul li a:active, header nav ul li a:focus {
  color: #111;
  background: #00ff16;
}

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

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

  li.nav-small {
    display: none;
  }

  .logo {
    display: block;
    margin: -.5em 0 0 0;
  }

  li.logo-moblie {
    display: none;
  }

  header {
    margin: 1.5em 0 0 0;
  }
  header nav {
    width: 93.5%;
    padding: 0 3.25%;
  }
  header nav ul {
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
  }
  header nav ul li {
    margin: 0 .25em;
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    white-space: nowrap;
  }
  header nav ul li a:link, header nav ul li a:visited {
    padding: .5em .5em;
    width: inherit;
  }

  li.logo {
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-align-self: flex-start;
    -moz-align-self: flex-start;
    -ms-align-self: flex-start;
    align-self: flex-start;
  }

  li.logo a {
    width: 100%;
    max-width: 70px;
  }
}

// Latest Jquery 1.X.X

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