Bootstrap Navbar collapseOnSelect

[Frostbourn]

Hi

If I use <Scrollchor> link instead of default react-bootstrap <Nav.Link>, collapseOnSelect won't work on mobile devices. Any workaround?

Regards

[bySabi]

@Frostbourn can you provide a minimal reproduction repo?

What devices does not work for you?

[Frostbourn]

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

[bySabi]

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: #28 or #17

[bySabi]

@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: #17

[Frostbourn]

Thank you! This resolved my problem.