CODEWITHSUNDEEP
javascriptjquerycsstouchfullpage.js
milka
milka

Reputation: 37

jQuery + Full Page + Mobile Menu closing =Unable to preventDefault inside passive event listener

i've stumbled into a problem where I am not unable to close my mobile navigation menu.

I am using jQuery Full Page for my front-end. My mobile menu opens when clicked on:

<nav class="menu col-xs-4 pull-right">
  <a href="#">
    <span>Menu</span>
    <button>
      <span>toggle menu</span>
    </button>
  </a>
</nav>

With jQuery code of:

$('nav, .mobile-menu--close').click(function(e){
    $('body').toggleClass('menu-open');
});

But it does nothing on closing with .mobile-menu--close

<a href="#" class="mobile-menu--close">
  <span>Close</span>
  <span class="mobile-menu--close-x"></span>
</a>

It is inside an aside element which is outside of main

    ...        
    <div class="background-image landing-mantas col-xs-8 pull-right">
        </div>
      </div>
    </div>
  </main>
  <aside class="mobile-menu">
    <ul>
      <li>
        <a href="#">Homepage</a>
      </li>
      <li>...

With mobile-open class it translates X 100% and brings aside.mobile-menu from X100% to 0%. So basically it swaps these with positions.

I've read answers with disabling touch-actions: none and so on. Nothing does seem to help.

Full preview of web could be found here

Keep in mind that this is wop so please view it in responsive view to get the point. But it should do the trick.

Upvotes: 1

Views: 305

Answers (2)

Keshari Nandan
Keshari Nandan

Reputation: 1148

As I can see from the link you provided. When menu-open is applied then your navigation is not clickable, so you need to set z-index of menu-open to higher that the z-index of your content (I am assuming the the page is inside the content class) - 

.menu-open{
 z-index: 1111;
}
.content{
z-index: 1000;
}

Upvotes: 0

Vel
Vel

Reputation: 9317

Remove this style and try

   .mobile-menu {
         z-index: -1; 
    }

Upvotes: 2

Related Questions