<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/boxicons@2.0.2/css/boxicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<div class="overlay"></div>
<div class="utility-nav d-none d-md-block">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<p class="small"><i class="bx bx-envelope"></i> logo@example.com | <i class="bx bx-phone"></i> +92-1234567890
</p>
</div>
<div class="col-12 col-md-6 text-right">
<p class="small">Free shipping on total of $99 of all products</p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-light main-menu" style="box-shadow:none">
<div class="container">
<button type="button" id="sidebarCollapse" class="btn btn-link d-block d-md-none">
<i class="bx bx-menu icon-single"></i>
</button>
<a class="navbar-brand" href="#">
<h4 class="font-weight-bold">Logo</h4>
</a>
<ul class="navbar-nav ml-auto d-block d-md-none">
<li class="nav-item">
<a class="btn btn-link" href="#"><i class="bx bxs-cart icon-single"></i> <span class="badge badge-danger">3</span></a>
</li>
</ul>
<div class="collapse navbar-collapse">
<form class="form-inline my-2 my-lg-0 mx-auto">
<input class="form-control" type="search" placeholder="Search for products..." aria-label="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit"><i class="bx bx-search"></i></button>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="btn btn-link" href="#"><i class="bx bxs-cart icon-single"></i> <span class="badge badge-danger">3</span></a>
</li>
<li class="nav-item ml-md-3">
<a class="btn btn-primary" href="#"><i class="bx bxs-user-circle mr-1"></i> Log In / Register</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-light sub-menu">
<div class="container">
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Schools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Publishers</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Delivery Information</a>
<a class="dropdown-item" href="#">Privacy Policy</a>
<a class="dropdown-item" href="#">Terms & Conditions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="search-bar d-block d-md-none">
<div class="container">
<div class="row">
<div class="col-12">
<form class="form-inline mb-3 mx-auto">
<input class="form-control" type="search" placeholder="Search for products..." aria-label="Search">
<button class="btn btn-success" type="submit"><i class="bx bx-search"></i></button>
</form>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<div class="container">
<div class="row align-items-center">
<div class="col-10 pl-0">
<a class="btn btn-primary" href="#"><i class="bx bxs-user-circle mr-1"></i> Log In</a>
</div>
<div class="col-2 text-left">
<button type="button" id="sidebarCollapseX" class="btn btn-link">
<i class="bx bx-x icon-single"></i>
</button>
</div>
</div>
</div>
</div>
<ul class="list-unstyled components links">
<li class="active">
<a href="#"><i class="bx bx-home mr-3"></i> Home</a>
</li>
<li>
<a href="#"><i class="bx bx-carousel mr-3"></i> Products</a>
</li>
<li>
<a href="#"><i class="bx bx-book-open mr-3"></i> Schools</a>
</li>
<li>
<a href="#"><i class="bx bx-crown mr-3"></i> Publishers</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="bx bx-help-circle mr-3"></i>
Support</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Delivery Information</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Terms & Conditions</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="bx bx-phone mr-3"></i> Contact</a>
</li>
</ul>
<h6 class="text-uppercase mb-1">Categories</h6>
<ul class="list-unstyled components mb-3">
<li>
<a href="#">Category 1</a>
</li>
<li>
<a href="#">Category 1</a>
</li>
<li>
<a href="#">Category 1</a>
</li>
<li>
<a href="#">Category 1</a>
</li>
<li>
<a href="#">Category 1</a>
</li>
<li>
<a href="#">Category 1</a>
</li>
</ul>
<ul class="social-icons">
<li><a href="#" target="_blank" title=""><i class="bx bxl-facebook-square"></i></a></li>
<li><a href="#" target="_blank" title=""><i class="bx bxl-twitter"></i></a></li>
<li><a href="#" target="_blank" title=""><i class="bx bxl-linkedin"></i></a></li>
<li><a href="#" target="_blank" title=""><i class="bx bxl-instagram"></i></a></li>
</ul>
</nav>
<section></section>
<section></section>
<section></section>
<section></section>
.btn .bx {
vertical-align: inherit;
margin-top: -3px;
font-size: 1.15rem;
}
.form-control {
height: calc(2.5rem + 2px);
padding: 0.5rem 1.5rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.btn {
font-size: 1rem;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
}
.bx.icon-single {
font-size: 1.5rem;
}
.form-inline .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.form-inline .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.form-inline .form-control {
width: 210px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.form-inline .form-control {
width: 440px;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.form-inline .form-control {
width: 600px;
}
}
.sub-menu.navbar-light .navbar-nav .active > .nav-link,
.sub-menu.navbar-light .navbar-nav .nav-link.active,
.sub-menu.navbar-light .navbar-nav .nav-link.show,
.sub-menu.navbar-light .navbar-nav .show > .nav-link {
border-bottom: 3px solid #007bff;
color: #007bff;
}
.navbar .navbar-toggler {
border: none;
}
.navbar-light .navbar-toggler:focus {
outline: none;
}
.navbar {
padding: 1rem;
}
.main-menu {
position: relative;
z-index: 3;
}
.sub-menu {
position: relative;
z-index: 2;
padding: 0 1rem;
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.sub-menu {
padding: 0 1rem;
}
.sub-menu.navbar-expand-md .navbar-nav .nav-link {
padding: 1rem 1.5rem;
}
}
.navbar.bg-light {
background: #fff !important;
box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1);
}
.user-dropdown .nav-link {
padding: 0.15rem 0;
}
#sidebar {
background: #fff;
height: 100%;
left: -100%;
top: 0;
bottom: 0;
overflow: auto;
position: fixed;
transition: 0.4s ease-in-out;
width: 84%;
z-index: 5001;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
padding: 1.25rem 1rem 1rem;
}
#sidebar.active {
left: 0;
}
#sidebar .sidebar-header {
background: #fff;
border-bottom: 1px solid #e4e4e4;
padding-bottom: 1.5rem;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #e4e4e4;
margin-bottom: 40px;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px 16px;
font-size: 1.1em;
display: block;
color: #000;
}
#sidebar ul li a:hover {
color: #7386d5;
background: #fff;
}
#sidebar ul li.active > a,
#sidebar a[aria-expanded="true"] {
color: #007bff;
background: #e6f2ff;
border-radius: 6px;
}
a[data-toggle="collapse"] {
position: relative;
}
#sidebar .links .dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
section {
padding: 6rem;
background: #e4e4e4;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.overlay {
background: rgba(0, 0, 0, 0.7);
height: 100vh;
left: 0;
position: fixed;
top: 0;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: -1;
width: 100%;
opacity: 0;
}
.overlay.visible {
opacity: 1;
z-index: 5000;
}
/* .mobiHeader .menuActive~.overlay {
opacity: 1;
width: 100%;
} */
ul.social-icons {
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
}
ul.social-icons li {
display: inline-block;
margin-right: 0px;
margin-bottom: 0;
}
#sidebar ul.social-icons li a {
font-size: 24px;
}
.utility-nav {
background: #e4e4e4;
padding: 0.5rem 1rem;
}
.utility-nav p {
margin-bottom: 0;
}
.search-bar {
position: relative;
z-index: 2;
box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.1);
}
.search-bar .form-control {
width: calc(100% - 45px);
}
.avatar {
border-radius: 50%;
width: 4.5rem;
height: 4.5rem;
margin-right: 8px;
}
.avatar.avatar-xs {
width: 2.25rem;
height: 2.25rem;
}
.user-dropdown .dropdown-menu {
left: auto;
right: 0;
}
$(document).ready(function() {
$("#sidebarCollapse").on("click", function() {
$("#sidebar").addClass("active");
});
$("#sidebarCollapseX").on("click", function() {
$("#sidebar").removeClass("active");
});
$("#sidebarCollapse").on("click", function() {
if ($("#sidebar").hasClass("active")) {
$(".overlay").addClass("visible");
console.log("it's working!");
}
});
$("#sidebarCollapseX").on("click", function() {
$(".overlay").removeClass("visible");
});
});
