Bug/On different height of the ContentGroup elements

[jan-capiak]

Hello,
I really like this Navbar, but i found a bug, that makes me crazy :)

This Bug can be found as well on your example website here: https://build-licattzisr.now.sh/

When you have like in the example above, different height of ContentGroup, you can see this bug.

When you hover over the smaller one, and go below the last

item there, the ContentGroup will not hide, but you can actually click on invisible

item that belongs to the second ContentGroup, which should be not active.

Maybe making inactive ContentGroup hidden would solve this problem, but let me know if you could fix it, because it would be a pitty to leave it with it :)

Thank you man!

[yusinto]

Hey @jan-capiak I can reproduce the issue. I will take a look soon when I have time. Thanks for reporting!

[yusinto]

@jan-capiak I've discovered this is a bug related to css-grids. The root component of react-site-nav is a css grid and if a content group contains another css grid, this problem occurs. If the content groups are all using flex, then this bug goes away!

I'll need more time to fix this, but in the interim, perhaps use flex in your content group as a workaround. I'll keep you up to date.

[yusinto]

@jan-capiak this has been fixed in the latest release v0.2.7

It turns out the overlapping content groups were the problem, not related to css-grid (that was a redherring). Please let me know if it works now! Thanks.

[jan-capiak]

Hello @yusinto , its working now, great job, I guess we can close this issue now :) thank you

[yusinto]

@jan-capiak cool! Closing this now.