badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*

Reply To: Main Menu

#90213

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