Opening menu at mobile

Question

Hello! How to achieve that when a user is opening menu at mobile phone, that menu opens in front of the page (content of the web page must be behind the opened menu)? Now when users open the menu on mobile, the whole page scrolles down.

opened menu - now > That way menu opens now
opened menu - future > I woud like that menu opens this way

SemiColonWeb · Accepted Answer

Hello,

This feature is not available by default. However, you can consider using the following CSS Code:
[ch_pre type="css"]@media (max-width: 991.98px) {
#header-wrap {
z-index: 299;
}

.primary-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 100vw;
	max-width: none;
	transform: translateX(-50%);
	background-color: #FFF;
}

.menu-container {
	position: relative;
	width: 720px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

}

@media (max-width: 767.98px) {
.menu-container {
width: 540px;
}
}

@media (max-width: 575.98px) {
.menu-container {
width: 100%;
}
}[/ch_pre]

and this will work in the way you have mentioned. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.