Slider in menu causes menu display when not hovered

  • Resolved njwp

    (@njwp)


    5 years, 5 months ago

    Hi

    I have a slider in my mega menu (from the smart slider 3 plugin). It works correctly.

    But if you move the cursor to any part of the page that is in the ‘footprint’ of the slider then it triggers the menu to show when it shouldn’t.

    I contacted Smart slider support and this is what they said.:

    I’ve seen this problem with Max Mega Menu plugin before.

    In short, the problem is that they use “visibilily: hidden” to hide submenus, instead of using display: none, which is the proper way to do it. This CSS should help:”

    li.mega-menu-item .n2-section-smartslider{
    display: none;
}

li.mega-menu-item.mega-animating .n2-section-smartslider,
li.mega-menu-item.mega-toggle-on .n2-section-smartslider{
    display:block;
}

    That css did solve the problem, so I’m just putting this here iin case anyone else has a slider in a menu and is having the same problem.

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

    (@megamenu)

    Hi njwp,

    Thanks for posting a solution here.

    “In short, the problem is that they use “visibilily: hidden” to hide submenus, instead of using display: none, which is the proper way to do it. This CSS should help:”

    – just a correction on this point. We use visibility: hidden to hide sub menus to allow dynamically sized elements to be given the correct size, e.g. google maps. Using display: none/block is fine for basic menus, but in the case of MMM where ‘rich content’ can be added to sub menus, it will prevent some widgets from being displayed correctly.

    Regards,
    Tom

    Thread Starter njwp

    (@njwp)

    Thanks Tom for the explanation of why you need to use ‘visibility:hidden’

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Slider in menu causes menu display when not hovered’ is closed to new replies.