Topic: MegaMenu Dropdown on Hover animation
Expected behavior In the static position of the MegaMenu, I can navigate through the submenu links without any problem. Actual behavior In Hover mode, when the mouse pointer is over the title, the MegaMenu opens normally below, but if I move the mouse pointer over the MegaMenu items, it closes (disappears). What would be the method so that when I'm on the link in the navigation bar and the MegaMenu opens, I can move to it without it disappearing?
Thank you very much for your help. Alain
Resources (screenshots, code snippets etc.)
CSS:
enter code here
.nav-item {
padding: 0.5rem 0xp;
}
.dropdown-hover:hover>.dropdown-menu { display: inline-block; }
.dropdown-hover>.dropdown-toggle:active { /Without this, clicking will make it sticky/ pointer-events: none; }
JS:
enter code here
Kamila Pieńkowska
staff answered 2 months ago
Does this example not work as you expect? https://mdbootstrap.com/docs/standard/extended/mega-menu/#section-dropdown-on-hover
LAGIER pro premium priority commented 2 weeks ago
Hello Kamila,
Thank you for your reply.
I specially created a test page with the fixed-top megamenu. I started with the fixed-top class for the entire site, but since there was a navigation problem, I removed the fixed-top class.
But to show you the problem, here's this page I created specifically. https://www.ialpes.com/test/MegaMenu-Fixed-Top.html
You will see that the menu hides the page behind it. If the header doesn't have the "fixed-top" class, there is no navigation problem.
You can see the home page, which doesn't have a fixed-top: https://www.ialpes.com
Thank you.
Kamila Pieńkowska
staff answered 2 weeks ago
CSS position fixed
takes the element out of normal document flow so that it won’t affect the layout of other elements. That means it will show over other elements. It is supposed to do that.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: -
- Device:
- Browser:
- OS:
- Provided sample code: No
- Provided link: No