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
Thread Starter
faxuno
(@faxuno)
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
Thread Starter
faxuno
(@faxuno)
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
Thread Starter
faxuno
(@faxuno)
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
Thread Starter
faxuno
(@faxuno)
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
Thread Starter
faxuno
(@faxuno)
Hi!
Ok, perfect!
Thank you very much Tom, your assistance is very precise and helpful!
Fantastic, thank you!
