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.

Transitioning Navigation 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.

Demo on JSFiddle Download from GitHub

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

With the Solodev Website Builder, it's faster and easier to design, build, and launch beautifully crafted websites than ever before.

Learn More

Adding a Transitioning Nav Using CSS

Step 1 - Add the HTML below to the top of your web page.

Step 2 - Add the CSS below to the main stylesheet of your website.

Step 3 - Add the JavaScript below to a file called nav.js

Step 4 - Add the includes below to the pages where your nav will live

Product

Solutions

Resources

About

Thank you for subscribing!

Features

Solutions

Resources

About