[spiros]

Hello. how could I convert the existing  hamburger menu to a curtain menu ONLY IN MOBILE VIEW ???

[spiros]

Hello. How I could convert the existing hamburger menu into a curtain menu ONLY IN MOBILE VIEW ?

[minal]

Hello Spiros,

To achieve curtain menu feat you have to add CSS in additional CSS section, To go to additional CSS, first open you dashboard and from there go to Appearance >> Customizer, you will find additional CSS section and paste the following CSS

@media screen and (max-width: 576px) {
	.site-header-menu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-top: 0;
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		position: absolute;
		top: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-o-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;
		z-index: 9999;
		background: #fff;
		width: 100%;
		padding: 25px;
	}

	.site-header-menu.toggled-on {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	.main-navigation {
		height: 80vh;
		overflow-y: auto;
		scrollbar-width: none;
	}

	.site-header-menu.toggled-on {
		position: absolute;
	}
}

Hope it work as per your need.

Sincerely,

Minal

[spiros]

Thank you very much for your reply.
I reduced the height to 45vh  because it leaves too much white space below the menu

[Author]

Posts