[Catch Flames] Make Mobile Navigation Menu Auto-Collapsed

Lol. It does have the option to use Footer instead. I’m going to do that right now. Thanks!

BTW, I was just playing with the desktop version of the site trying to understand a different plugin, and I noticed that the desktop version primary menu is acting like the mobile site menus? Like, for the desktop, instead of hovering over a parent menu and the child menu appears and the ‘sub-child’ menu appears, I have to click on the parent menu first, then the child menu after, and then that menu works where I can just hover and display the menu items. As soon as I refresh the page, I have to click through first and then it becomes ‘hoverable.’ I don’t mean to be picky. I’m just wondering if you know what I can do to the code while I have you online lol ??

Many thanks!

Yea I see that problem, I thought I had coded it not to do that. So I’ll just look into that

Try this code instead:

/* Your code goes here */ 

var $ = jQuery,
    breakpoint = 940,
    initClass = 'toggleSubnavInitiated',
    menu,
    parentLinks,
    childrenItems;

$(document).ready(function() {
    menu = $('.menu');
    parentLinks = menu.find('.menu-item-has-children > a');
    childrenItems = menu.find('.sub-menu');

    if ($(window).width() <= breakpoint) {
        toggleSubnav(menu, parentLinks, childrenItems);
    }
});

$(window).resize(function() {

    if ($(window).width() <= breakpoint) {
        toggleSubnav(menu, parentLinks, childrenItems);
    }
});

function toggleSubnav(menu, parentLinks, childrenItems) {

    if (parentLinks.length !== 0) {
        menu.addClass(initClass);
        childrenItems.hide();

        parentLinks.on('click', function(event) {
            event.preventDefault();

            $(this).siblings('.sub-menu').toggle();
        });
    }
}

lol. That’s okay! No rush! You already solved a really big problem for me and helped me out a lot, so thank you!

Oh, wow. You posted the code already before I posted my reply. That worked! Yay! I’m so happy. lol. Thanks!

So just playing with the site, and when I’m on the computer and I happen to drag the screen from desktop to mobile or mobile to desktop, the parent menu items with child menu items become unresponsive unless the page gets refreshed. That’s fine though because I don’t think people are going to do that and there’s no option on my page to switch from mobile to desktop or vice versa, so I can’t see that being an issue for users.

I love it. Thanks a bunch! That was a huge hurdle for me. Thank you, thank you, thank you!

That’s okay.
I’ve noticed some funny things happening when resizing from mobile to desktop too and it looks like a theme bug. You could probably find the same issue on the theme’s demo site.

I tried demo-ing it on a different site I’ll be working on later, but you can like resize the window between desktop and mobile a few times, and it works? I disabled the plugin and tried it, and it works. I remember someone asked the theme developer about collapsing child menu items, and he said that a customizer would have to do that because there’s a lot of interlinking things (my interpretation. clearly. lol.) or redirects? I don’t know if that helps explain that if menus are auto-collapsed that this resizing window making menu items unclickable without a refresh inevitable.

It’s weird.

Anyway! Thank you so much for all your help!