DEV Community

Cover image for Responsive Navbar with Bootstrap4 & Jquery
Codenv
Codenv

Posted on

2 1

Responsive Navbar with Bootstrap4 & 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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

Full tutorial
https://youtu.be/wOrKQ3Plojs

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay