NO BUG: Nav nestable mega menu hover problem

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

I have problems with the hover in a mega menu.
I have created a 3 column grid mega menu like in this video.
All plugins deactivated. If I am logged into WordPress, move the mouse fast enough or give the dropdown menu a padding, the error does not appear. So it’s not that relevant to me as I assume I’ll have padding on the dropdown element anyway. Just wanted to report it as I’m sure it shouldn’t be normal…
(Bricks nestalbe mega menu hover problem)

2

Hi Jonas,
Thanks for your report!

I translated it to English using deepl.com, since the “official forum language” is English :v:

The problem should be fixed with the next version. I will let you know here when the new version is available.

If the problem is still present, it would be great if you could send me the template as a JSON so that I can reproduce it.

Best,
timmse

3

Hi Jonas,
We’ve fixed this issue in Bricks 1.11.1, now available as a one-click update in your WordPress Dashboard.

Changelog: Bricks 1.11.1 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse

4

I still have this issue even after updating to 1.11.1

5

Same for me, I’ve the same issue with bricks 1.11.1

6

Hi @friiitz &n @djalma81 ,
Please provide a live link and a proper problem description.

Thanks!

Ps: This bug is not the same as this one @djalma81

7

The site is currently hosted locally but I recorded a short screencast that shows the issue:
Mega menu hover issue

When I hover over the parent item in the navar (dropdown item) to access the mega menu container, it is impossible to get there unless you move the mouse insanely quickly.

8

Can you please add the template to e.g. a try.bricksbuilder.io installation (or any other publicly available installation) and send login credentials and a link to this thread to help@bricksbuilder.io? @friiitz

9

I copied the template to the try.bricksbuilder.io site and it works well there. Also the standard (out of the box) dropdown menus work at my site. So the issue must come from something else on my site…

10

Please reinstall the theme and regenerate the styles manually, if the style method (Bricks » Settings » Performance) set to external files. In case of any caching plugin: clear the cache.

11

That (reinstall theme & regenerate styles) did not solve the problem, unfortunately. I noticed that with the standard dropdowns the following inline css gets added: --brx-dropdown-height-before: 20px;

In case of the two not working mega menu dropdowns it has the value of --brx-dropdown-height-before: 0px;

I will also sent you an email to help@bricksbuilder.io with login information for a staging site.

12

Hey friiitz,
We found the problem:

You have given your tabs element within the dropdown content position: absoute, top: 19px so that it is flush with your menu bar. However, this means that the height of the dropdown content is 0px, and the calculation of --brx-dropdown-height-before fails.

In previous versions, this height was 60px by default to cover “most” scenarios, but now, it’s calculated (which is the better approach).

But long story short: the issue was easy to solve by removing the position absolute and the top value, and instead, adding the 19px to the dropdown » transform (open), which is the proper way to move the dropdown content down :slight_smile:

CleanShot 2024-11-13 at 16.59.21

1 Like
13

Thank you very much for your help and for changing it already on the site :+1: :grinning: