Responsive Navigation with Bootstrap

This is a quick and completely Responsive navigation that have developed with Bootstrap, CSS, and jQuery. You need to download Bootstrap, Font Awesome and jQuery first, then you can start coding.

  1. Download Bootstrap

    https://getbootstrap.com/docs/4.5/getting-started/download/

  2. Download font Awesome

    https://fontawesome.com/start

  3. Download jQuery

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

At first, In the Index.html page you have to include bootstrap.min.css from Bootstrap,

all.css from Font Awesome and style.css inside the <head> element.Next,  jQuery.min.js from jQuery, bootstrap.min.js from bootstrap, and main.js should be included.

Ensure that all three files are included before closing the body tag. And you’ve got to follow the order as well. jQuery first, bootstrap second and main.js.

  1. 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>

2) 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;
}

3) 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();
});

One thought on “Responsive Navigation with Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *