MegaMenu Dropdown on Hover animation


Topic: MegaMenu Dropdown on Hover animation

LAGIER pro premium priority asked 3 months ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: -
  • Device:
  • Browser:
  • OS:
  • Provided sample code: No
  • Provided link: No