Home » Jquery » jquery – how to Navbar collapse error in mobile view automatically toggling

jquery – how to Navbar collapse error in mobile view automatically toggling

Posted by: admin February 22, 2020 Leave a comment

Questions:

In mobile view, if I click once on the breadcrumbs (navbar collapsed), the navbar items will show. If I click again, the navbar items will toggle (flash, show and hide). I want it to show on click and if I click anywhere on the screen it should collapse.

$(document).ready(function() {
  // Open navbarSide when button is clicked
  $('#navbarSideButton').on('click', function() {
    $('#n1').addClass('reveal');
    $('.overlay').show();
  });

  // Close navbarSide when the outside of menu is clicked
  $('.overlay').on('click', function() {
    $('#n1').removeClass('reveal');
    $('.overlay').hide();
  });
});
@media screen and (min-width: 550px) {
  .form1 {
    width: 20%;
  }
  .user_mobile {
    display: none;
  }
  .cart_mobile {
    display: none;
  }
  #n3 {
    display: none;
  }
}

@media screen and (max-width: 550px) {
  .cart {
    display: none;
  }
  .user {
    display: none;
  }
}

.mega-menu {
  overflow: hidden;
  /* padding: 5px;*/
  width: 1300px;
  margin-top: 15px;
}

.mega-menu2 {
  overflow: hidden;
  /* padding: 5px;*/
  width: 1000px;
  margin-top: 15px;
}

.mega-menu3 {
  overflow: hidden;
  /* padding: 5px;*/
  width: 600px;
  margin-top: 15px;
}

.mega-menu4 {
  overflow: hidden;
  /* padding: 5px;*/
  width: 1000px;
  margin-top: 15px;
}

.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-28.5%, 0) !important;
}

.dropdown-menu-center1 {
  left: 30% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
}

h6 {
  font-size: 10px;
}

@media (max-width: 550px) {
  .navbar-collapse {
    height: auto;
    width: 65%;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid #ccc;
    background-color: #343a40;
    overflow-y: scroll;
    z-index: 990;
  }
  .nav-item {
    padding: .2rem 0;
    margin: 0;
  }
  .nav-link {
    padding-left: 2rem!important;
  }
  .navbar-collapse {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
  }
  .reveal {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
  }
  .overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    opacity: 0.2;
    z-index: 980;
  }
  .navbar-collapse {
    // other code omitted
    @include media-breakpoint-up(xs) {
      width: 85%;
    } // Small
    @include media-breakpoint-up(sm) {
      width: 50%;
    } // Medium
  }
  #n2 {
    display: none;
  }
  .change a:hover {
    background-color: #343a40!important;
    background-image: none!important;
    color: #c41f2a!important;
  }
  .dropdown-menu {
    background-color: transparent;
    border: transparent;
    border: none;
  }
}

body {
  background-color: #eaeded;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-sm navbar-light bg-dark fixed-top ml-auto" id="nav1"> <div class="container-fluid"> <a href="#" class="navbar-brand "> <img src="img/logo.png" alt="logo" style="width: 150px" class="responsive" /> </a> <div class="ml-2 user_mobile" style="color: #fff"> <i class="fas fa-user-circle fa-2x"></i> </div> <div class="ml-2 cart_mobile" style="color: #fff"> <i class="fas fa-shopping-cart fa-2x"></i> </div> <button class="navbar-toggler" data-toggle="collapse" data-target="#n1" id="navbarSideButton"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse " id="n1"> <ul class="navbar-nav text-left ml-auto " id="n2"> <li class="nav-item"> <a href="#" class="nav-link text-light">Deals & Offers</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Food</a> <div class="dropdown-menu mega-menu dropdown-menu-center" aria-labelledby="navbarDropdown"> <div class="d-inline-flex "> <a class="dropdown-item text-center lis-item" href=""> <img src="img/dairy-bread.png "> <h6>Dairy, bread & eggs</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/cooking-supplies.png"> <h6>Dairy, bread & eggs</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/snacks.png"> <h6>Snacks</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/Chocolates-Desserts.jpg"> <h6>Chocolates desserts</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/breakfast-cereal.png"> <h6>Breakfast cereal</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/jams-honey-spreads.png"> <h6>Jams, sauces & honey </h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/ReadyMeals.jpg" class="img-fluid"> <h6>Ready meals & mixes </h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/ice-cream.png"> <h6>Frozen food </h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/meat-poultry-seafood.png"> <h6>Chicken, meat & seafood </h6> </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Drinks</a> <div class="dropdown-menu mega-menu2 dropdown-menu-center" aria-labelledby="navbarDropdown"> <div class="d-inline-flex "> <a class="dropdown-item text-center lis-item" href=""> <img src="img/tea.png "> <h6>Tea</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/coffee.png"> <h6>Coffee</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/HealthDrinks.jpg"> <h6>Health drinks</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/juices.png"> <h6>Juices</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/soft-drinks.png"> <h6>Soft drinks</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/FlavouredMilk-Lassi.jpg"> <h6>Flavoured milk & lassi </h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/Concentrates.jpg" c> <h6>Concentrates </h6> </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fruits & Vegetables</a> <div class="dropdown-menu mega-menu3 dropdown-menu-center" aria-labelledby="navbarDropdown"> <div class="d-inline-flex "> <a class="dropdown-item text-center lis-item" href=""> <img src="img/fresh-vegetables.png "> <h6>Fresh vegetables</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/fresh-fruits.png"> <h6>Fresh fruits</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/cut-fruits.png"> <h6>Cut vegetables & fruits</h6> </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Household Supplies</a> <div class="dropdown-menu mega-menu4 dropdown-menu-center1" aria-labelledby="navbarDropdown"> <div class="d-inline-flex "> <a class="dropdown-item text-center lis-item" href=""> <img src="img/laundry-detergents.png "> <h6>Laundry detergents</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/household-cleaners.png"> <h6>Household cleaners</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/dishwashing-supplies.png"> <h6>Dishwashing supplies</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/air-freshners.png"> <h6>Air freshners</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/InsectRepellants.jpg"> <h6>Insect repellants</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/PaperTowels-Tissues.jpg"> <h6>Paper towels & tissues</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/pooja-supplies.png"> <h6>Pooja supplies</h6> </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Beauty & Personal Care</a> <div class="dropdown-menu mega-menu4 dropdown-menu-center1" aria-labelledby="navbarDropdown"> <div class="d-inline-flex "> <a class="dropdown-item text-center lis-item" href=""> <img src="img/bath-shower.png "> <h6>Soap & Body wash</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/skin-care.png"> <h6>Skincare</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/hair-styling.png"> <h6>Hair care & styling</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/makeup-nails.png"> <h6>Make up & nails</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/fragrances.png"> <h6>Deos & fragrances</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/health-personal-care.png"> <h6>Health & personal Care</h6> </a> <a class="dropdown-item text-center lis-item" href=""> <img src="img/personal-care-health-applicances.png"> <h6>Personal care applicances</h6> </a> </div> </div> </li> </ul> <!-- *----------Mobile View Start From Here---------* --> <ul class="navbar-nav mt-5 ml-auto " id="n3"> <li class="nav-item"> <a href="#" class="nav-link text-light">Deals & Offers</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Food</a> <div class="dropdown-menu badge-dark " aria-labelledby="navbarDropdown"> <div class="change"> <a class="dropdown-item text-left " href="" style="color: #fff"> Dairy, bread & eggs </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Snacks </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Chocolates desserts </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Breakfast cereal </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Jams, sauces & honey </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Ready meals & mixes </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Frozen food </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Chicken, meat & seafood </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Drinks</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="change "> <a class="dropdown-item text-left" href="" style="color: #fff"> Tea </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Coffee </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Health drinks </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Juices </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Soft drinks </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Flavoured milk & lassi </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Concentrates </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fruits & Vegetables</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="change"> <a class="dropdown-item text-left" href="" style="color: #fff"> Fresh vegetables </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Fresh fruits </a> <a class="dropdown-item" href="" style="color: #fff"> Cut vegetables & fruits </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Household Supplies</a> <div class="dropdown-menu " aria-labelledby="navbarDropdown"> <div class="change"> <a class="dropdown-item text-left " href="" style="color: #fff"> Laundry detergents </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Household cleaners </a> <a class="dropdown-item text-left" href="" style="color: #fff"> Dishwashing supplies </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Air freshners </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Insect repellants </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Paper towels & tissues </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Pooja supplies </a> </div> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link text-light dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Beauty & Personal Care</a> <div class="dropdown-menu " aria-labelledby="navbarDropdown"> <div class="change "> <a class="dropdown-item text-left " href="" style="color: #fff"> Soap & Body wash </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Skincare </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Hair care & styling </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Make up & nails </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Deos & fragrances </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Health & personal Care </a> <a class="dropdown-item text-left " href="" style="color: #fff"> Personal care applicances </a> </div> </div> </li> </ul> </div> <form class="form-inline my-2 my-lg-0 form1 input-group "> <input class="form-control " type="search" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-btn" id="basic-addon2"> <button class="btn btn-outline-success my-sm-0" type="submit">Search</button> </span> </div> </form> <div class="ml-2 user" style="color: #fff"> <i class="fas fa-user-circle fa-2x"></i> </div> <div class="ml-2 cart" style="color: #fff"> <i class="fas fa-shopping-cart fa-2x"></i> </div> <div class="overlay"></div> </nav>
How to&Answer: