Preview

View/Download
Notes
This example navigation includes:
- CSS reset
- Fully Responsive
- Built with Mobile First
- Built with SASS (SCSS)
- Built with
box-sizing: border-box
If you want the SASS (SCSS) files used to create the example download the example from GitHub (link above). I used css and not SASS (SCSS) for the CodePen examples to be more useful to more people.
- HTML
- CSS
- JS
<!-- 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');
});
});