Shop Categories

X

Mobile Menu – Stay on Top

Home Forums Agama Pro Mobile Menu – Stay on Top

Topic Resolution: Resolved
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #8055
    Aeneon
    Participant

    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 4 years, 8 months ago by Aeneon.
    #8058
    Zex
    Moderator

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.