[Resolved] Dispatch / Mega-Menu Mix

[blitzgeek]

Hi there, i have a problem with a site in development.
It’s about the hover for the main navigation and current-menu item, best seen below the “inform” topic.
In the mega-menu area the marking is confusing (says the customer), because the “ul-part” is marked below the “li-part”.
Is it possible to underline the “ul” directly?
I hope I was able to clarify what I mean.
Best regards,
Volker

[David]

Hi there,

to help understand this, is the issue when hovering over the sub menu item the UL is underlined?
Eg. I hover over Mafia and the underline is below the UL….

[blitzgeek]

Hi David, here is a screenshot, hope this helps.
https://blitzgeek.net/wp-content/uploads/dispatchmegamenu.jpg

[David]

Hmmm… complex one and correcting it may ‘change’ the other menu behaviour.
Try this CSS for the navigation stying instead:

@media (min-width: 769px) {
    .main-navigation ul li {
        position: relative;
    }

    .main-navigation ul > li > a:after {
        content: '';
        position: absolute;
        height: 0;
        width: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        filter: hue-rotation(90deg);
        -webkit-filter: hue-rotation(90deg);
        -webkit-transition: height 0.35s ease;
        transition: height 0.35s ease;
        background-color: red;
        
    }

    .main-navigation ul > li a:hover:after, .main-navigation ul li.current-menu-item a:after {
        height: 6px;
        
    }
}

[blitzgeek]

Thanks David – but nothing changed.

[blitzgeek]

David!
i tried this one on a local site .. and it works!
So let me check what’s different, i will keep you informed.
It was the order in the style.css.
I have placed the Mega Menu block above the navigation section and now it works.
Thank you very much!
You did a great job, as always. Now you can take a little more time with the Sections Block. 😉
Cheers!

[David]

Awesome 🙂 Glad to be of help

[Author]

Posts