search

yusinto / react-site-nav

A kick ass site menu powered by styled components inspired by Stripe.
MIT License
201 stars 19 forks source link

Bug/On different height of the ContentGroup elements #4

Closed jan-capiak closed 6 years ago

jan-capiak commented 6 years ago

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. spa-github-menu spa-developers-menu

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. spa-github-menu-li-tools

    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 commented 6 years ago

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

    yusinto commented 6 years ago

    @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 commented 6 years ago

    @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 commented 6 years ago

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

    yusinto commented 6 years ago

    @jan-capiak cool! Closing this now.