Tagged: x
-
AuthorPosts
-
October 7, 2016 at 5:36 am #1206571
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!
October 7, 2016 at 8:36 am #1206734Hi,
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.
October 7, 2016 at 10:16 am #1206861Hi 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!
October 7, 2016 at 10:26 am #1206869After 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!
October 7, 2016 at 7:51 pm #1207507Hello 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.
October 8, 2016 at 5:31 am #1207861Hi, 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!
October 8, 2016 at 5:32 am #1207862This reply has been marked as private.October 8, 2016 at 4:42 pm #1208241Hi 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!
November 11, 2016 at 3:32 am #1253042Hi, 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!
November 11, 2016 at 3:32 am #1253043This reply has been marked as private.November 11, 2016 at 5:03 am #1253163Hello 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.
November 11, 2016 at 6:46 am #1253256Hi, Thanks, that seems to work!
Cheers
November 11, 2016 at 11:13 am #1253519You’re most welcome, Mateo.
-
AuthorPosts