Preview

View/Download
Notes
This example navigation includes:
- CSS reset
- Fully Responsive
- Built with Mobile First
- Built with SASS (SCSS)
- Built with
box-sizing: content-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 -->
<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');
});
});