Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1206571

    mateoserendipia
    Participant

    Hi,

    I am trying to get the mobile menu (for a page with one-page-navigation) to collapse after a menu item has been clicked/touched, to keep the menu from covering the entire page. I found the code below in on of the (many) threads on this forum, but it only works partially: it does hide the menu, but it doesn’t fold out the sub-menu that is under one of the menu-items. This means the sub-menu-items cannot be seen or reached. Any better solutions?

    This is the code i’m using now:

    (function($){
      $('.x-navbar .x-nav-wrap.mobile a').on('touchend click', function(){
        $('.x-nav-wrap.mobile').toggleClass('in').css('height', 0);
        $('.x-btn-navbar').toggleClass('collapsed');
      });
    })(jQuery);

    Thanks!

    #1206734

    Paul R
    Moderator

    Hi,

    Please replace your js code with this.

    
    (function($){
      $('.x-navbar .x-nav-wrap.mobile a>span').on('touchend click', function(){
       $('.sub-menu').removeClass('in');
       $('.x-btn-navbar').click();   
      });
    })(jQuery);
    

    Then add this in Custom > Edit Global CSS in the customizer.

    
    .x-navbar .x-nav-wrap.mobile .x-nav>li>a>span {
           width: calc(100% - 40px);
    }
    

    Hope that helps.

    #1206861

    mateoserendipia
    Participant

    Hi Paul,

    Thanks for the answer. It works partially: the submenu’s now appear, so that’s great. But the menu doesn’t collapse after choosing any of the submenu-items, so it still obscures the page. It does collapse automatically when a main-menu-item is chosen, but it should do the same with a sub-menu-item. Would there be a way to fix this too?

    Thanks!

    #1206869

    mateoserendipia
    Participant

    After testing the issue is a little more subtle: all menu-items (both sub and main) do collapse after having been chosen but only if and when the word itself is touched. When the empty space in the box next to the menu-word is touched the page navigates to the chosen section, but the menu stays open and covers the page. Thats is a rather confusing user experience, as the user will touch the box, and not the word (especially when the menu-items are very short). Is there a way to fix that?

    Thanks!

    #1207507

    Rue Nel
    Moderator

    Hello There,

    Thank you for the clarifications! To resolve this issue, please update the JS code and use this instead:

    (function($){
      $('.x-navbar .x-nav-wrap.mobile a, .x-navbar .x-nav-wrap.mobile a>span').on('touchend click', function(){
       $('.sub-menu').removeClass('in');
       $('.x-btn-navbar').click();   
      });
    })(jQuery);

    Hope this helps. Please let us know how it goes.

    #1207861

    mateoserendipia
    Participant

    Hi, thanks for the answer. I’m afraid this doesn’t work as should. It solves the problem with the boxes (they are now entirely clickable, so that’s fine), but now the menu is back to the first problem of not showing the sub-menus. When the main menu-item that contains a sub-menu is clicked, the entire menu disappears… Any more suggestions?

    In case you want to have a look, I enclose credentials in the next comment.

    Thanks!

    #1207862

    mateoserendipia
    Participant
    This reply has been marked as private.
    #1208241

    Rad
    Moderator

    Hi there,

    That’s because <span> is part of the link itself. The event that the link will trigger will also receive by <span>.

    Let’s change it to this

    (function($){
      $('.x-navbar .x-nav-wrap.mobile a:not([href="#"]), .x-navbar .x-nav-wrap.mobile a:not([href="#"])>span').on('touchend click', function(){
       $('.sub-menu').removeClass('in');
       $('.x-btn-navbar').click();   
      });
    })(jQuery);

    Thanks!

    #1253042

    mateoserendipia
    Participant

    Hi, it’s been a while since the last comment, sorry! There remains still one naggin problem with the mobile menu: The one menu item that has submenu’s (‘werk’) only opens when either the word or the arrows are clicked (with finger). When the empty space in between is touched, nothing happens. This is confusing for the viewer. Is there a way to solve this, so that the entire block reacts to clicking, rather than just the elements. The menu-items that do no have sub-menus already show this (desired) behavior.

    Thanks!

    #1253043

    mateoserendipia
    Participant
    This reply has been marked as private.
    #1253163

    Rue Nel
    Moderator

    Hello There,

    Thanks for providing the login details. To resolve this issue when the empty space in between is touched, the sub menu will open, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

    (function($){
      $('.x-navbar .x-nav-wrap.mobile a[href="#"]').on('touchend click', function(e){
       e.preventDefault();
       $('.sub-menu').toggleClass('in');  
      });
    })(jQuery);

    Please let us know if this works out for you.

    #1253256

    mateoserendipia
    Participant

    Hi, Thanks, that seems to work!

    Cheers

    #1253519

    Jade
    Moderator

    You’re most welcome, Mateo.