Issue with dropdown menus not appearing/appearing in the wrong place

  • Resolved Leo_E

    (@leo_e)


    9 years, 7 months ago

    On our site (https://www.social-labs.com/) I’m having some issues with the navigation menu at the top. The dropdown menus are really screwy.

    For example, if you hover over “The Book”, the menu under “Courses” also appears. If you hover over “Courses”, nothing appears, so you can’t access any dropdown menu other than what’s under “The Book”.

    Even if I move the sub menu items away from “The Book” (for example if I move them to “Media” in my “menus” setting) they will still only show up if I rollover “The Book”.

    I’m guessing it’s down to some attribute that’s missing, or got the wrong syntax. I’m keen to hear if anyone has any ideas as to what might be causing this behaviour?

    Thanks,

    Leo

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you know how the navigation is done, is it through your theme or a plugin?

    Thread Starter Leo_E

    (@leo_e)

    I believe it’s through the theme. It’s a modified version of twentyfourteen…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What JS did you use for it?

    Thread Starter Leo_E

    (@leo_e)

    I’m not sure – the site was put together by a third party developer… Is there an obvious/straightforward way to find out?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This is doing it:

    $('#menu-item-88').hoverIntent(
        function(e) {
            $( '.nav-menu li > .sub-menu' ).slideDown();
          }, function(e) {
            $( '.nav-menu li > .sub-menu' ).slideUp();
          }
    );

    https://www.social-labs.com/wp-content/themes/sociallabs/js/main.js?ver=3.9.6

    Basically the code is foul and will never work properly with more than 1 submenu

    Do you have access to edit that file?

    Thread Starter Leo_E

    (@leo_e)

    Aha, no I don’t have access, although could get access within a few days.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    When you get access, change this:

    $('#menu-item-88').hoverIntent(
        function(e) {
            $( '.nav-menu li > .sub-menu' ).slideDown();
          }, function(e) {
            $( '.nav-menu li > .sub-menu' ).slideUp();
          }
    );

    To this:

    $('.menu-item-has-children').hoverIntent(
        function(e) {
            $('.sub-menu', this).slideDown();
          }, function(e) {
            $('.sub-menu', this).slideUp();
          }
    );

    Thread Starter Leo_E

    (@leo_e)

    Many thanks Andrew – I’ll update this thread next week to confirm that has worked.

    Thread Starter Leo_E

    (@leo_e)

    Right, got the logins, that has worked a treat! Thanks again for helping out so swiftly!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Issue with dropdown menus not appearing/appearing in the wrong place’ is closed to new replies.