Bootstrap Navbar Toggler into cross on click.
html Part
<button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-icon top-bar"></span>
<span class="navbar-icon middle-bar"></span>
<span class="navbar-icon bottom-bar"></span>
</button>
Css Part
.navbar-toggler{
width: 20px;
height: 15px;
position: relative;
t
.navbar-toggler{
width: 20px;
height: 15px;
position: relative;
transition: .5s ease;
margin-right: 20px;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus{
outline: none;
border: none;
box-shadow: none;
}
.navbar-toggler span{
margin: 0;
padding: 0;
}
.navbar-icon{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: var(--main);
border-radius: 4px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease;
box-shadow: 2px 2px 4px var(--main);
}
.middle-bar{
margin-top:0;
}
.navbar-toggler .top-bar{
margin-top: 0;
transform: rotate(135deg);
}
.navbar-toggler .middle-bar{
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar{
margin-top: 0;
transform: rotate(-135deg);
}
.navbar-toggler.collapsed .top-bar{
margin-top: -20px;
transform: rotate(0deg);
}
.navbar-toggler.collapsed .middle-bar{
opacity: 1;
filter: alpha(opacity=1);
}
.navbar-toggler.collapsed .bottom-bar{
margin-top: 20px;
transform: rotate(0deg);
}
ransition: .5s ease;
margin-right: 20px;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus{
outline: none;
border: none;
box-shadow: none;
}
.navbar-toggler span{
margin: 0;
padding: 0;
}
.navbar-icon{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: var(--main);
border-radius: 4px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease;
box-shadow: 2px 2px 4px var(--main);
}
.middle-bar{
margin-top:0;
}
.navbar-toggler .top-bar{
margin-top: 0;
transform: rotate(135deg);
}
.navbar-toggler .middle-bar{
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar{
margin-top: 0;
transform: rotate(-135deg);
}
.navbar-toggler.collapsed .top-bar{
margin-top: -20px;
transform: rotate(0deg);
}
.navbar-toggler.collapsed .middle-bar{
opacity: 1;
filter: alpha(opacity=1);
}
.navbar-toggler.collapsed .bottom-bar{
margin-top: 20px;
transform: rotate(0deg);
}
x