sticky="top" not working in Navbar

[Nishant-Pall]

I'm new to react-bootstrap and I'm working on a react application. I want my navbar to stick to the top all the time while scrolling through the application, I passed the sticky attribute as "top" as well but that doesn't seem to change the behavior. I'll share the CSS and JSX

<Navbar className="sticky-nav" bg="light" expand="lg" sticky="top">
          <Navbar.Brand href="#l">BRAND</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <NavDropdown title="Products" className="basic-nav-dropdown">
                <NavDropdown.Item className="nav-dropdown-item" href="#">Create</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item className="nav-dropdown-item" href="#">Personalize </NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item className="nav-dropdown-item" href="#">API</NavDropdown.Item>
              </NavDropdown>
              <Nav.Link className="nav-sign-in" href="/signin">Sign-In</Nav.Link>
              <Button className="btn btn-dark" href="/register">Sign-Up</Button>
            </Nav>
          </Navbar.Collapse>
        </Navbar>

.sticky-nav{
	position: sticky;
	top: 0;
}
a{
	text-decoration: none;
}
.sticky-nav .btn{
	border-radius: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	margin: 0 0.5em;
	font-size: 17px;
}
.sticky-nav .nav-sign-in{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	margin: 0 0.5em;
}
.sticky-nav .nav-dropdown-item{
	color: black;
}

.sticky-nav .basic-nav-dropdown{
	margin: 0 0.5em;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
}

I do have a couple more issues, I hope I can clear them here as well

[itschits]

Try using
<Navbar className="fixed-top" bg="light" expand="lg">

[Nishant-Pall]

Hey, thanks a lot for the solution. I actually fixed it with simple CSS.

[CeoFred]

DO YOU MIND POSTING THE SOLUTION?

[chenstanilovsky]

^^^ Please

[Nishant-Pall]

It's this. The one that @itschits posted

[Abir-Reza]

Try using <Navbar className="fixed-top" bg="light" expand="lg">

I had the same problem, this solved the problem

[Amirlasalle]

Thank you! it worked! but now theres no border between the navbar and the page, so everything has shifted up. how can I create a border between the navbar and the rest of the page?