Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

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.

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, h2, 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,
.navbar-toggle {
  float: none;
}
.navbar-default .navbar-nav>li {
  display: inline-block;
  text-align: center;
  float: none;
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:hover  {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  background-color: #0392CC;
}
header.sticky {
  position: fixed;
  font-size: 24px;
  line-height: 48px;
  height: 48px; 
  width: 100%;
  background: #000;
  text-align: left;
  padding-left: 20px;
}
header.sticky .navbar-header {
  width: 20%;
  margin-bottom: 0;
  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,
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>

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev