Hi,
Please go to ‘Appearance > Customize > Additional CSS’ and paste the below Custom CSS code.
@media (max-width: 767px) {
.navbar-collapse,
.navbar-collapse.show {
display: block;
}
.navbar-collapse {
position: fixed;
top: 0;
left: -100%;
bottom: 0;
z-index: 10001;
padding: 50px 15px 15px;
margin: 0;
background-color: #ffffff;
transition: all ease-in-out 0.2s;
-webkit-transition: all ease-in-out 0.2s;
-moz-transition: all ease-in-out 0.2s;
}
.navbar-collapse.show {
left: 0;
width: 90%;
box-shadow: 50px 0 100px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 50px 0 100px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 50px 0 100px rgba(0, 0, 0, 0.7);
}
.navbar-toggler {
position: absolute;
top: 0;
left: 15px;
transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
-moz-transition: all ease-in-out 0.4s;
animation-name: navbutton;
}
@keyframes navbutton {
0% {opacity: 1;}
50% {opacity: 1;}
100% {opacity: 0;}
}
[aria-expanded="true"].navbar-toggler {
position: fixed;
top: 0;
left: 15px;
z-index: 10002;
color: #000000;
}
[aria-expanded="true"].navbar-toggler:before {
content: "\f00d";
font-size: 20px;
}
.navigation-bar-top {
min-height: 46px;
}
.navigation-bar-top .search-toggle {
height: 46px;
}
.search-block {
margin-top: 46px;
}
}
Thanks
.
.