Bug: Navbar 5 - React Code Example

At a glance

The post describes a bug in a React component called "Navbar 5" from the website https://www.relume.io/react-components/navbar-5. The issue is that when clicking on a link in the submenu, the submenu closes. The community member needs a quick fix to use this React component, as they have no time for debugging.

In the comments, a community member suggests that the issue might be because the submenu is opening on hover, and disabling the hover prop might resolve the issue. Another community member provides a solution, which is to add a z-50 to the < section > element of the Navbar5 component when it is used with another section, such as Header5.

The community member who reported the issue responds with "tnx", indicating that the provided solution works.

Useful resources

wwotz

BUG: Navbar 5 - React code example. https://www.relume.io/react-components/navbar-5
Copy-paste the React code example in your IDE and, on desktop, try to click a link in the submenu. It closes once you leave the main link.
Quick fix needed asap! Need to use this React component and no time for debugging.

3 comments

MMatt Johnson

@wotz don't know how helpful this would be but this is happening because its on hover, but if you can disable the hover prop somewhere, than it might be resolved and only open on click?

I'm not a react developer, so I'll tag @Nour in here - but in case he's not around, I just wanted to mention that - likely something that would be in the buttonProps.

NNour

Hey @wotz,
Thanks for pointing this out. The whole section just needs z-index when it's put with another section such as Header5. Just add z-50 to your <section> element of Navbar5 and it should work

wwotz

tnx

Add a reply

Community forum for knowledge and support

Bug: Navbar 5 - React Code Example