Sticky Navbar Bootstrap 4 with jQuery stickynav

A simple jQuery plugin to create responsive, customize-able sticky navbar for Bootstrap 4 with built in clickable nav links that smooth scroll to content sections.

Plugin Overview

Plugin: stickyNav
Author: Federico Cargnelutti
Licence: MIT Licence
Published: March 25, 2019
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

How to Use Sticky Navbar for Bootstrap:

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

<!-- jQuery -->
<script src=""></script>

<!-- Bootstrap JS -->
<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Bootstrap CSS -->
<link href="" 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>
        <div class="collapse navbar-collapse">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#features">Features</a>
            <li class="nav-item">
              <a class="nav-link" href="#download">Download</a>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>

4. Active the plugin in jQuery document ready function.

$(document).ready(function() {

    $('.navbar-toggler').click(() => {

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.