[Resolved] Submenu Showing On Hover

Home Forums Support [Resolved] Submenu Showing On Hover

Home Forums Support Submenu Showing On Hover

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1657269
    Aaron

    Hi! I am setting up a mega menu on my site. I used your mega menu guide. It is working great so far. I am having one issue. When I hover over the menu dashicon, the text from all the submenus appears. I have my primary menu set to click only in the customizer. The menu works correctly when clicked. I’m not sure what is causing this to happen. How can I disable the submenu text on hover of the hamburger? Thanks!

    #1657424
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not seeing a submenu in the site you’ve linked.

    Can you confirm?

    #1657668
    Aaron

    Hi! That was my mistake. I was trying to fix it myself and I turned the menu off to do some testing. It should be live now.

    #1658086
    Leo
    Staff
    Customer Support

    That’s really strange. So does the click/hover work correctly without the mega menu CSS?

    #1660055
    Aaron

    Yeah it works fine. I even have other clients where I built the same Mega Menu for them and it doesn’t do that.

    #1660060
    Aaron

    One thing I noticed. Before this started happening I was having a problem where the 4 column mega menu was putting the 4th column under the 1st column. I fixed that by adding flex wrap options that I saw in another forum post.

    nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
    left: 0 !important;
    flex-wrap: wrap !important;
    display: flex !important; }

    When I remove the last two flex lines, the hover issue goes away, but the 4th column drops again.

    #1660778
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Can you try adding the latest code?: https://docs.generatepress.com/article/building-simple-mega-menu/

    I’m seeing some missing parts. Then let us know and we’ll see if we can spot the issue.

    Thanks!

    #1661531
    Aaron

    Hi! I replaced the code with the one on the page you linked. It looks like both issues are occurring now. The third column is dropping under the first, and the menu items show up on hover. Thank you for all of your help so far!

    #1662078
    Tom
    Lead Developer
    Lead Developer

    In the CSS you added, replace this:

    display: flex;

    With this:

    display: flex !important;

    Then, add this CSS:

    @media (min-width: 769px) {
        nav .main-nav .mega-menu > ul > li:hover > a {
            color: #fff;
        }
    }

    Hope this helps ๐Ÿ™‚

    #1662100
    Aaron

    Hi! That code fixed the column dropping issue. I am still seeing the menu items when I hover the hamburger icon.

    #1662419
    Tom
    Lead Developer
    Lead Developer

    Aha, try replacing this:

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
    }

    With this:

    nav .main-nav .mega-menu > ul.toggled-on {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
    }
    #1662952
    Aaron

    Yesss, thank you! I have been pulling my hair out for days trying to fix that, haha. I can code in other languages but I’m fairly new to CSS, so I am still learning my way around.

    Thank you so much for the help, I really appreciate it!

    #1663586
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.