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 */
*, *: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');
});
});