React Bootstrap - position sticky not working

Question

I am using React Bootstrap and the class position-sticky doesn't work at all. There is not overflow at all levels. Any hints?

Answer 1

I found out the Container needs height specified.

Adding height: 100% to the parent and top: 0 to the child fixes the issue.

The reason is that the sticky rule uses the height of the parent to calculate its own position.

Using React Bootstrap the className h-100 can be used to set height: 100%

I hope this helps also others :)

Answer 2

<>
  <Navbar
    sticky="top"
    collapseOnSelect
    expand="lg"
    bg="primary"
    variant="dark"
  >
    <Container className="">
      <Navbar.Brand as={Link} to="/">
        <img height={"30px"} src={logo} alt="" />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="me-auto">
          <Nav.Link href="home#services">Services</Nav.Link>
          <Nav.Link href="home#experts">Experts</Nav.Link>
          <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">
              Another action
            </NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">
              Something
            </NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">
              Separated link
            </NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav>
          <Nav.Link as={Link} to="/about">
            About
          </Nav.Link>
          <Nav.Link as={Link} to="/login">
            Log In
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
</>