Need to disabled Mega menu on 100px scroll

  • Hi Team,

    I have created our menu by using mega menu and I have make full width mega menu panel.
    In my menu when someone over-hover it, mega-menu will open and when he still on it (panel) and try to scroll our website, website scroller goes down but he still on our mega menu panel.

    So I want when someone hover over some tab (menu) and when he is on mega menu panel and try to scroll down our website, the mega menu should disabled after some scrolled. because our mega menu panel already taking full width of the screen. So it doesn’t make sense to still on mega menu while scrolling the website.

    Please suggest us.

    • This topic was modified 5 years, 4 months ago by amrapal.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi amrapal,

    Have you already done this somehow? I do not see the sub menus once the header becomes sticky.

    Regards,
    Tom

    Thread Starter amrapal

    (@amrapal)

    Hi,

    with the help of below code, I am trying to do it:

    jQuery(window).scroll(function(){
    if( jQuery(document).scrollTop() > 50 ) {
    jQuery(‘.mega-sub-menu’).hide();
    } else {
    jQuery(‘.mega-sub-menu’).show();
    }
    });

    but in this case it only works when scroll > 50 so that it will not visible on sticky menu. Means it’s not working properly as I want. I want to only disable on any scroll instead of conditional disabled.

    Mega Menu panel should disable on scroll only not with some condition so that when we scroll down and then hover-over it on stick menu, still will show mega-menu panel.

    Please suggest.

    • This reply was modified 5 years, 4 months ago by amrapal.
    • This reply was modified 5 years, 4 months ago by amrapal.
    Plugin Author megamenu

    (@megamenu)

    Hi Amrapal,

    What you are trying to do is very complex and outside of the scope of support I can offer you (either free or Pro support).

    As a tip, somewhere in your code you will need to detect if a sub menu is open, and you can do that by searching the menu HTML for a “mega-toggle-on” class. When that class is present, a sub menu will be open.

    Regards,
    Tom

    Thread Starter amrapal

    (@amrapal)

    Hi Team,

    Expept the above code.
    Is there any possibility?

    Even When I make mega menu panel on click event instead of hover.
    In this case when somebody click on menu tab, it will mega menu properly and then scrolled it down and then again scrolled up, menu panel is still opened as it.

    suggest.

    • This reply was modified 5 years, 4 months ago by amrapal.
    Plugin Author megamenu

    (@megamenu)

    Hi amrapal,

    The reason the menu does not scroll out of the way is because you have a fixed header.

    The only other thing I can think would be for you to disable your fixed/sticky header in your theme options, so that the menu scrolls out of view naturally. If you want other behaviour, then it is something you would need to custom code yourself (or hire a freelancer to help you with).

    Regards,
    Tom

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need to disabled Mega menu on 100px scroll’ is closed to new replies.

Tags