SOLVED: Hover item problem in nav widget (nestable)

Bugs
1

Browser: Chrome 114
OS: Windows
URL: fvvv – Try Bricks – t7b3ff1b

Hi team!

In the new nav widget, I faced a challenge and decided to share it with you. First of all, please see the image below.

nav

As you can see in the image above, the nav content has border radius on 4 sides. Also, nav item has 1px bprder bottom. The caret feature is also active for this dropdown.
I set the background color of the item to change when the item is hover over. But the problem here is that when I hover over the item, it causes the border radius of the content to be ignored. (The image below)

nav2
nav2770×299 5.64 KB

I tried different ways but to no avail. Is there a problem here? Or am I doing something wrong?

(I apologize in advance if the sentences do not seem clear. Because I use Google translate)

2

Hey @HOSEIN,

thanks for your report.

I was able to reproduce the issue and added it to our bug tracker.

Best,

André

1 Like
3

Hey @HOSEIN,

this is actually harder than I initially thought. The easy fix I was thinking about was to just add an overflow of hidden to the sub menus. But this would break nested sub menus. So at the moment you have the following options:

1. If you have only one level of sub menus you can go the overflow route using some custom CSS:

root .sub-menu { overflow: hidden }

2. If you have multiple levels you can do the following:

2a. Set the sub menu’s background-color to transparent. Set the background-color (default and hover) you want to use on your sub menu items instead.
2b. Set the border-radius using some custom CSS:

root .sub-menu > li:first-child {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

root .sub-menu > li:last-child {
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
}

Let me know if that helps.

Best,

André

1 Like
4

Hi again @aslotta,

So can’t this be solved in future versions?

5

Is this being tracked for resolve in future releases? It’s a frustrating little bug.

6

Hi Chris,
It is almost impossible to implement a general solution for this, as it depends heavily on how your menu is structured (number of submenus etc.). André’s suggestion is a good option, as far as I can see.