Sticky Navbar Bootstrap 4 with jQuery stickynav

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	stickyNav
Author:	Federico Cargnelutti
Licence:	MIT Licence
Published:	March 1, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 3.3.1 or Latest version, Bootstrap 4.1.3 and Polyfill Js
File Type:	zip archive (HTML, CSS & JavaScript, Image)
Package Size:	192 KB

Demo Download

How to Use Sticky Navbar for Bootstrap:

1. Load the jQuery and Bootstrap framework into your web page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

2. Also include the plugin’s JavaScript,Polyfill Js and custom styles for bootstrap navbar.

<!-- Custom styles for bootstrap navbar -->
<link href="css/styles.css" rel="stylesheet">

<!-- Polyfil Js -->
<script src="js/vendor/babel-polyfill-6.26.0.min.js"></script>

<!-- StickyNav Js -->
<script src="js/jquery.sticky-nav.js"></script>

3. To Create “Sticky Navbar Bootstrap 4”, build the basic HTML structure for navbar and add your links into it.

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#header">StickyNav Demo</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#features">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#download">Download</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

4. Active the plugin in jQuery document ready function.

$(document).ready(function() {
   $('nav').stickynav();

    $('.navbar-toggler').click(() => {
    $('.navbar-collapse').toggleClass('show');
      });
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.