I really like fixed navigations. Sorry.
A Pen by White Wolf Wizard on CodePen.
<header id="header"></header> | |
<nav id="navigation"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">Info</a></li> | |
<li><a href="#">Work</a></li> | |
<li><a href="#">Blog</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</nav> | |
<main id="container"></main> |
$(document).ready(function () { | |
var $nav = $('#navigation'), | |
posTop = $nav.position().top; | |
$(window).scroll(function () { | |
var y = $(this).scrollTop(); | |
if (y > posTop) { $nav.addClass('fixed'); } | |
else { $nav.removeClass('fixed'); } | |
}); | |
}); |
$color-base: #fff; | |
$color-accent: #8aba56; | |
body { | |
background-color: #666; | |
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14104/stardust.png); | |
background-blend-mode: hard-light; | |
font-size: 10pt; | |
} | |
a { | |
color: $color-accent; | |
font-weight: 700; | |
text-decoration: none; | |
} | |
// HEADER | |
#header { | |
position: relative; | |
width: 100%; height: 250px; | |
background: $color-accent; | |
} | |
// NAVIGATION | |
#navigation { | |
position: relative; | |
width: 100%; height: 50px; | |
background: $color-base; | |
box-shadow: 0 0 5px rgba(#000, 0.15); | |
text-align: center; | |
line-height: 50px; | |
ul { | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: center; | |
align-content: center; | |
align-items: center; | |
li { | |
a { | |
height: inherit; | |
padding: 0 25px; | |
display: inline-block; | |
transition: all 150ms ease; | |
line-height: inherit; | |
text-transform: uppercase; | |
&:hover { | |
background: $color-accent; | |
color: $color-base; | |
} | |
} | |
} | |
} | |
&.fixed { | |
position: fixed; | |
top: 0; left: 0; right: 0; | |
} | |
} | |
// CONTAINER | |
#container { min-height: 300%; } |