Effect on item hover

Hi Faxuno,

Please go to Mega Menu > Menu Themes > Custom Styling and add the following:

@include desktop {
    #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:after {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: #000;
        transition: all 0.6s;
    }
    #{$wrap} #{$menu} > li.mega-menu-item:hover > a.mega-menu-link:after,
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:after {
        width: 100%;
    }
}

You will see the “background” CSS style there which you can change to your liking (it is set to black at the moment).

Regards,
Tom

Hi Tom!

Thank you very much!

I have set the right background value like the demo and now works correctly.

Now, like the demo, I would have the also the same line on active status of the page, is it possible?

Another thing is: could the MegaMenu panel be exactly after the hover line, like in demo template?

Hi faxuno,

Thanks for leaving a review ??

Please try this CSS instead:

@include desktop {
    #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:after {
        display: block;
        content: "";
        position: absolute;
        bottom: 3px;
        left: 0;
        width: 0%;
        height: 3px;
        background: #000;
        transition: all 0.6s;
        visibility: visible;
        opacity: 1;
    }
    #{$wrap} #{$menu} > li.mega-menu-item:hover > a.mega-menu-link:after,
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:after {
        width: 100%;
    }
}

Regards,
Tom

Hi!

Thank you Tom! The active status now is visible.

The last thing I would have is this …..
Could the MegaMenu panel be exactly after the hover line, like in demo template?
I have see in Demo/Original Template that the active/hover line is more in high that in my site with Megamenu. Instead of translating the entire submenu panel, I think I would be better to have the active/hover line a bit higher …

This is the actual working code in CSS Megamenu:

@include desktop {
    #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:after {
    	display: block;    
        content: "";
        position: absolute;
		bottom: 0px;
        left: 0;
        width: 0%;
        height: 3px;
        background: rgba(255,255,255,.5);
        transition: all ease 0.35s;
		visibility: visible;
        opacity: 1;
    }
    #{$wrap} #{$menu} > li.mega-menu-item:hover > a.mega-menu-link:after,
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:after {
        width: 100%;
    }
}

Hi Faxuno,

Hopefully we get it this time:

@include desktop {
    #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:after {
        display: block;
        content: "";
        position: absolute;
        bottom: 3px;
        top: auto;
        left: 0;
        width: 0%;
        height: 3px;
        background: #000;
        transition: all 0.6s;
        visibility: visible;
        opacity: 1;
    }
    #{$wrap} #{$menu} > li.mega-menu-item:hover > a.mega-menu-link:after,
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:after {
        width: 100%;
    }
}

(note the “top: auto” and “bottom: 3px” rules)

Regards,
Tom

Hi!

Thank you Tom, perfect!

There is another thing. In Original/Demo template, when I select an item in the sub-menu, the item kept the active status in sub-menu, and also the primary item in top level menu is active and underline.

Is it possible in Max Mega Menu?

Hi Faxuno,

Highlighting sub menu items is not a default option (as it can have unintended consequences), but it’s possible with some custom CSS that can be found on this page:

https://www.megamenu.com/documentation/highlight-active-menu-items/

Regards,
Tom

Hi!

Ok, perfect. Now also the sub-menu item is highlighted when the page is active.
I have added the
/* Apply Hover Styling to active Mega Menu – Second Level Links */ section of the page you have linked me.

Last thing. Is it possible to have the respective primary menu item underlined when a sub-menu page is active?

Hi Faxuno,

It is possible yes, use this CSS instead:

@include desktop {
    #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:after {
        display: block;
        content: "";
        position: absolute;
        bottom: 3px;
        top: auto;
        left: 0;
        width: 0%;
        height: 3px;
        background: #000;
        transition: all 0.6s;
        visibility: visible;
        opacity: 1;
    }
    #{$wrap} #{$menu} > li.mega-menu-item:hover > a.mega-menu-link:after,
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:after,
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:after, 
    #{$wrap} #{$menu} > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:after {
        width: 100%;
    }
}

Regards,
Tom

Hi!

Ok, perfect!

Thank you very much Tom, your assistance is very precise and helpful!

Fantastic, thank you!