Adding a Transitioning Nav Using CSS

A transitioning sticky navigation allows you to display two different navigations based on where the viewer is on the page. This article gives you the code to add a sticky transitioning navigation to your website which you can customize to meet your needs.

Below is the HTML, CSS, and JavaScript required to add a transitioning sticky nav to your website.

Step 1

Add the HTML below to the top of your web page

<header>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
             <img src="https://www.solodev.com/assets/side-nav/logo.png" alt="Logo Solodev">
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>      
        </div><!--/.nav-collapse -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      </div>
    </nav>
</header>
<div style="display: block; margin: 0 auto; text-align: center;">
<img src="https://www.solodev.com/assets/hero/large-image.jpg">
</div>

Step 2

Add the CSS below to the main stylesheet of your website

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {      
    margin: 0;  
    padding: 0; 
    border: 0;  
    font-size: 100%;    
    font: inherit;      
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {       
    display: block;
}
body {  
     line-height: 1;
     background-color: #f5f5f5;
}
ol, ul {        
     list-style: none;
}
blockquote, q { 
      quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
        content: '';    
      content: none;
}
table { 
      border-collapse: collapse;        
      border-spacing: 0;
}
  
header {
    text-align: center;
    font-size: 72px;
    line-height: 108px;
    height: 108px;
    background: #000000;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100 !important;
    text-transform: capitalize;
    font-size: 32px;
    margin-bottom: 20px;
    margin-bottom: 20px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.navbar-default {
  background-color: #222;
  border: 0px;
}
.navbar-header {
  width: 100%;
  margin-bottom: 35px;
}
.navbar-brand {
  width: 100%;
}
.navbar-brand>img {
    display: block;
    margin: 0 auto;
}
.navbar-right {
  width: 100%
}
.navbar-nav {
  float: none;
}
.navbar-default .navbar-nav>li {
  display: inline-block;
  text-align: center;
  float: none;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
    color: #fff;
    background-color: #0392CC;
}
.navbar-toggle {
  float: none;
}
        
header.sticky {
   position: fixed;
   font-size: 24px;
   line-height: 48px;
   height: 48px; 
   width: 100%;
   background: #000000;
   text-align: left;
   padding-left: 20px;
}
header.sticky .navbar-header {
  width: 20%;
  margin-bottom: 0px;
  float: left;
}
header.sticky .navbar-brand {
    height: auto;
    margin: 0;
    padding: 0;
}
header.sticky .navbar-brand img {
  padding-top: 11px;
  width: 130px;
  margin-right: 5px;
}
header.sticky .navbar-right {
  width: 80%;
}
header.sticky .navbar-nav {
  float: right;
}
header.sticky .navbar-toggle {
  float: right;
}

Step 3

Add the JavaScript below to a file called nav.js

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});

Step 4

Add the includes below to the pages where your nav will live

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="nav.js"></script>

Demo on JSFiddle

Download from GitHub

Originally Posted here on the Solodev Web Design Blog

To learn more about the power of the Solodev Web Design Platform visit solodev.com/features/!

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.