Main Nav. and Mega Menu Troubleshooting

A follow up to this: I currently have the number of columns on the mega menu set to 4. However, the 3rd column is breaking into the next row. How would you suggest fixing? Setting it to 5 columns does bring the 4th column up, but then there is a large gap where the fifth column should be. :)

Hi there,

See this part of the code, give the display: flex some !important - like sp::

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

Thanks, David. That worked. I also found that setting the column width to 24% (down from 25%) did the trick.

    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
       <strong> width: 24%;</strong>
        vertical-align: top;
    }

Let me know about the other issues. Here's the screencast again: https://sterndesign.nimbusweb.me/s/share/5903981/kk3y1fffect7risk8t2m

Hi Matt,

The subheadings are currently treated as dropdown menu toggles, so when they're clicked, the sub-menu padding changes which is causing the shift.

Would you like it to be clickable?

If not, try this CSS:

nav .main-nav .mega-menu > ul > li.menu-item.menu-item-has-children >a {
    pointer-events: none;
}

Let me know if you need further assistance :)

Hi Ying, yep that worked.

Last for now would be why the mega menu-sub menu items are showing up when you hover on "Air Purifiers". Here's a screenshot: https://nimb.ws/LIK6qM

Thank you,

Matt

Try add this CSS as well:

.dropdown-click .main-navigation .main-nav >ul >li.mega-menu.menu-item-has-children > ul:not(.toggled-on) {
    display: none;
}

Ying, those sub menu items are still there on hover, even after adding the above css. Any ideas?

Ah it's been overridden by the display: flex !important;, try add !importantto my CSS as well:

.dropdown-click .main-navigation .main-nav >ul >li.mega-menu.menu-item-has-children > ul:not(.toggled-on) {
    display: none !important;
}

That did the trick. Ok just one more for now. :)

How do I target only the two sub menu links show in the screenshot? https://nimb.ws/idcrxg

I have added the css class "bold-links" to both of them.

Thanks for all the help.

Give this one a try: .main-navigation .main-nav ul li ul li.bold-links.menu-item a

Thanks, that worked. Another question:

Is it possible to make the single dropdown columns (not mega menu) wider, so that the sub-menu links don't wrap?

I tried this code `.dropdown-click .main-navigation.sub-menu-left .sub-menu.toggled-on, .dropdown-click .main-navigation.sub-menu-left ul li.sfHover > ul.toggled-on {
right: 0;
<strong> width: 160%;`

But it messes up the mega menu.

Here's a screenshot to clarify: https://nimb.ws/z7B5M8

Thanks kindly.

Give this CSS a try :)

.dropdown-click .main-navigation ul li:not(.mega-menu) ul {
    width: 300px;
}

Yep, that did the trick. Couple more questions (I hope). Here's a screenshot which explains the issues: https://nimb.ws/2WsKCB

Here's the URL again: https://3sternstaging.com/

Thank you!

To move the 6th column to the right, try this CSS:

nav .main-nav .mega-menu > ul {
    justify-content: flex-end;
    align-items: flex-start;
}
li.menu-item-3723 {
    margin-top: -300px;
}

For the hover color:

nav .main-nav .mega-menu>ul>li:hover, nav .main-nav .mega-menu>ul>li:visited{
    color: #ffffff;
}

Hope that's helpful :)