The component works in the default state because the logo image is small enough to avoid pushing down and creating a gap between the drop-down toggle and the actual mega menu.
When you add your own logo file and its height exceeds the default 4.5rem navbar height, then it pushes down and creates a gap. Therefore, it thinks the mouse is no longer hovering on the drop-down and the menu disappears.
How do we avoid this happening? Some logos need to be a lot bigger than 4.5rem high. I鈥檝e tried increasing the navbar height, and then the logo height but the same issue occurs. It still thinks there鈥檚 a gap.
Also, in some instances, we need padding around the navbar to avoid the logo touching the top of the screen and first hero section, how do we achieve this without causing the hover issue?
Hope that makes sense
