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

Adding a Sticky Nav Menu to your Website

Data shows that websites with a sticky nav menu are 22% faster to navigate...

Data shows that websites with a sticky nav menu are 22% faster to navigate by eliminating the need to scroll back to the top of the page. Several studies have shown that users prefer a website with a sticky nav to one without it 100% of the time without being told of the difference between websites. All data supports that your website should have a sticky nav so this article will show you how to do just that. Enjoy.

Below is the HTML, CSS, and JavaScript to add a sticky navigation menu to your website.

Step 1 - Add the HTML below to populate your website navigation

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <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>
      <a class="navbar-brand" href="#">
        <img src="https://www.solodev.com/core/fileparse.php/257/urlt/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>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
    
<div class="container">
  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Sticky Nav</h1>
    <p>This example is a quick exercise to illustrate how a sticky top navigation works. Also included is the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>To see the sticky navbar in action, just scroll.</p>
  </div>
</div> <!-- /container -->

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

body {
  min-height: 2000px;
  padding-top: 70px;
}
.navbar-default {
  background-color: #222;
  border: 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;
}
.navbar-brand {
  height: auto;
  margin: 0;
  padding: 0;
}
.navbar-brand>img {
  padding-top: 11px;
  width: 130px;
  margin-right: 5px;
}

Step 3 - Add the includes below to your website

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.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