[Resolved] Submenu Showing On Hover

[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!

[Leo]

Hi there,

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

Can you confirm?

[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.

[Leo]

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

[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.

[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.

[Tom]

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!

[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!

[Tom]

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 🙂

[Aaron]

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

[Tom]

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;
}

[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!

[Tom]

Glad I could help! 🙂

[Author]

Posts