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: 2019-03-25 05:28:42
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="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');
      });
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*