Responsive Navbar with Bootstrap4 & Jquery

#html #bootstrap #navigation #jquery

Demo
Hi, everyone,
In this tutorial, I'll show you how to build a simple and responsive navigation bar. Here I used bootstrap 4 and jquery to build this navigation bar.

Download Bootstrap
https://getbootstrap.com/docs/4.5/get...

Download Jquery
https://jquery.com/
Here, make sure to download the jquery.min.js.

Download font Awesome
https://fontawesome.com/start

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MY NAV</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="vendor/fontawesome/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />

  </head>
  <body>
    <div class="page-wrap">
      <div class="nav-style">
        <div class="mobile-view">
          <div class="mobile-view-header">
            <div class="mobile-view-close">
              <i class="fas fa-times js-toggle"></i>
            </div>
          </div>
          <div class="mobile-view-body"></div>
        </div>

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <div class="container py-2 px-2">
            <a class="navbar-brand" href="#">Navbar</a>

            <div class="d-inline-block d-lg-none ml-md-0 ml-auto py-3">
              <i class="fas fa-bars js-toggle" style="font-size: 25px; color: white"></i>
            </div>

            <div class="d-none d-lg-block">
              <ul class="navbar-nav ml-auto js-clone-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact us</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <script type="text/javascript" src="vendor/jquery/jquery-3.5.0.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

style.css

.page-wrap:before{
    transition: .3s all ease-in-out;
    background: rgba(0, 0, 0, 0.6);
    content: "";
    position: absolute;
    z-index: 2000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
}

.off-view .page-wrap{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    overflow: hidden;
}

.off-view .page-wrap:before{
    opacity: 0.5;
    visibility: visible;
}

.mobile-view{
    width:300px;
    position: fixed;
    right: 0;
    z-index: 2000;
    padding-top: 20px;
    background: white;
    height: calc(100vh);
    transform: translateX(110%);
    box-shadow: -10px 0 20px -10px rgba(0,0,0,0.1);
    transition: .3s all ease-in-out;
}

.off-view .mobile-view{
    transform: translateX(0%);
}
.mobile-view .mobile-view-header{
    width: 100%;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile-view .mobile-view-header .mobile-view-close{
    float: right;
    margin-top: 8px;
    margin-right: 10px;
}


.mobile-view .mobile-view-header .mobile-view-close i{
    font-size: 30px;
    display: inline-block;
    padding-right: 10px;
    line-height: 1;
    cursor: pointer;
    transition: .3s all ease;
}

.mobile-view .mobile-view-body{
    overflow: scroll;
    position: relative;
    padding: 20px;
    height: calc(100vh - 52px);
    padding-bottom: 150px;
    padding-top: 50px;
}

.mobile-view .clone-view{
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

.mobile-view .clone-view a{
    padding: 10px 20px;
    display: block;
    position: relative;
    color: black;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
}

main.js

jQuery(document).ready(function ($) {
  "use strict";

  var navclone = function () {
    $(".js-clone-nav").each(function () {
      var $this = $(this);
      $this.clone().attr("class", "clone-view").appendTo(".mobile-view-body");
    });

    $("body").on("click", ".js-toggle", function (e) {
      var $this = $(this);
      e.preventDefault();

      if ($("body").hasClass("off-view")) {
        $("body").removeClass("off-view");
      } else {
        $("body").addClass("off-view");
      }
    });

    $(document).mouseup(function (e) {
      var container = $(".mobile-view");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($("body").hasClass("off-view")) {
          $("body").removeClass("off-view");
        }
      }
    });

    $(window).resize(function () {
      var $this = $(this),
        w = $this.width();
      if (w > 768) {
        if ($("body").hasClass("off-view")) {
          $("body").removeClass("off-view");
        }
      }
    });
  };
  navclone();
});