Closed Frostbourn closed 4 years ago
@Frostbourn can you provide a minimal reproduction repo?
What devices does not work for you?
This is how my nav looks like. It does not work on any mobile devices. I can't collapse menu on any link select with Scrollchor.
components/Navigation.js
import { Nav, Navbar } from "react-bootstrap"
import Scrollchor from "react-scrollchor"
<StyledHeader>
<Navbar collapseOnSelect className={`${state ? "scrollBox" : ""}` + " shadowBox"} expand="md" fixed="top">
<Navbar.Brand href="/">
<h3 className="logo">
LOGO
</h3>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav.Item as={`li`}>
<Scrollchor to="#hashOne" className="nav-link" role="button" animate={{offset: 0, duration: 100}}>
Link One
</Scrollchor>
</Nav.Item>
<Nav.Item as={`li`}>
<Nav.Link href="#hashTwo">
Link Two
</Nav.Link>
</Nav.Item>
</Navbar.Collapse>
</Navbar>
</StyledHeader>
export default Header
Please inspect your code with some Web developer tool and make sure that the Scrollchor
component is not nested inside <a>
parent as it has happened to other users in issues: https://github.com/some-react-components/react-scrollchor/issues/28 or https://github.com/some-react-components/react-scrollchor/issues/17
@Frostbourn sometimes when Scrollchor
is used inside other components more "invasive" like those based on bootstrap
it is recommended to use the Childless functionality that does not return any DOM node and event management is done by the user.
You can use the code of the issue: https://github.com/some-react-components/react-scrollchor/issues/17
Thank you! This resolved my problem.
Hi
If I use
<Scrollchor>
link instead of default react-bootstrap<Nav.Link>
,collapseOnSelect
won't work on mobile devices. Any workaround?Regards