SOLVED: 1.8 Mega Menu Not Staying Up if I Have to Reposition it

Browser: Chrome, 112.0.5615.137, Brave browser
Version 1.50.121 Chromium: 112.0.5615.138, Safari Version 16.3 (18614.4.6.1.6)
OS: macOS
URL: Link to a page that illustrates this issue
Video: Short video

Loving the implementation here. When trying to create a megamnenu I ran into a small issue. Basically, If I have to position to megamenu dropdown (set the margins or y translate coords, or top) to better align it with my content, if my mouse leaves the menu item, the mega menu disappears.

I think some consideration/control needs to be given on how a user wants to position the megamenu dropdown area and ensure that if they have to move it lower that the megamenu dropdown stays in view.

1 Like

I remember doing something like this for dropdowns that were supposed to appear like 20px below the navbar. An “invisible” pseudo element with the height of the space, positioned on top of the drop down/mega menu. Would be quite easy to implement this with a dynamic height depending on the space.

Just my 2 cents though, I’m sure the team will come up with a more elegant solution haha.

1 Like

So adding an empty pseudo-element :after and applying width and height and setting absolute position helps to get around the issue; good suggestion :joy:

Hi Alex,
Thanks so much for your feedback!

I was able to reproduce the issue and added it to our bug tracker.
Let’s see if we can find a solution that works in any case (which could be difficult though) :slight_smile:

Best regards,
timmse

1 Like

Yeah, I have ZERO idea how to address. Adding a pseudo-element to compensate isn’t great, but it worked. Great job though, really impressed by this implementation.

1 Like

Hi guys,

We’ve fixed this issue in Bricks 1.8 beta 2 using a pseudo element that should work in common situations, now available as a manual download in your account.

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on any production/live website. It is only meant for testing in a local/staging environment.

1 Like