Mobile Menu – Stay on Top

[MacThemes]

Hi,

I’m currently trying to integrate a Stay-on-Top Feature for the Mobile Menu, but I have some Problems with the CSS Code. So currently I’m using this Code for #masthead:

@media screen and (max-width: 1128px)
{
	#masthead
	{
		display: block;
		position: -webkit-sticky;
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 9999;
	}

	body.admin-bar #masthead { top: 46px; }
}

#masthead .mobile-menu
{
	position: fixed;
	width: 100%;
	top: 54px;

	// Shadow for nav-Element …

	-webkit-box-shadow: 0px 1px 4px 0px rgba(29, 29, 29, 0.75) !important;
	-moz-box-shadow: 0px 1px 4px 0px rgba(29, 29, 29, 0.75) !important;
	box-shadow: 0px 1px 4px 0px rgba(29, 29, 29, 1) !important;
}

Here’s a Screenshot …

Which results in a very ugly Problem: The Menu stays on Top, but if you open all Sub-Menus you can’t scroll through the Menu, because the Website behind is still scrolling. Also if you extend a new Item in the Menu the Content on the Website scrolls down.

here’s the Site, if you want to test it.

How can I fix this ?

Regards,
Aeneon

• This topic was modified 5 years, 8 months ago by MacThemes.

[Zex]

Hello,Aeneon!

We like your site design 🙂

Add next code to solve the problem you have:

nav.mobile-menu >ul{
	height: 200px;
	overflow: auto;
}

Change the height value per your needs.

http://prntscr.com/iowhs6

Best Regards

[Author]

Posts