I want to make the navigation menu responsive by adding a toggle button for the dropdown menu on mobile screens. Here is the code snippet:
.nav-link {
display: inline-block;
position: relative;
color: black;
}
html,body{
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
.navbar{
padding: .8rem;
}
.navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar .container {
width: auto;
}
.cart {
position: absolute;
right: 5%;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
.navbar-nav li:first-child{
display: none;
}
@media (max-width: 768px) {
.navbar {
border-radius: 4px;
padding-right: 0;
padding-left: 0;
}
.navbar-brand{
align-items: center;
padding-right: 10%;
}
.navbar-nav li:not(:first-child){
border-bottom: 1px solid #000;
}
.navbar-nav li:first-child{
display: block;
}
#myNavbarToggler13 {
position: fixed;
top: 0;
left: 0;
z-index: 999999;
width: 75%;
height: 100%;
background-color: #f9f9f9;
overflow: auto;
bottom: 0;
max-height: inherit;
}
.nav-item{
transition: 0.3s;
padding: 5px 35px 0px;
/*margin: 5px 0 0 50px;*/
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13"
aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand
<button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler"
aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/>
</svg>
</button>
</a>
<div class="collapse navbar-collapse" id="myNavbarToggler13">
...
</div>
<div class="collapse navbar-collapse" id="cartToggler">
</div>
</nav>
<script>
$(".navbar-toggler ").on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({
'width': 'toggle'
}, 350);
$(".menu-overlay").fadeIn(500);
});
$(".menu-overlay").click(function(event) {
...
});
$("#crossButton").click(function(event) {
...
});
</script>