Using Bootstrap 5.2 and React I have inputted this navbar component but I'm having an issue with the Navlinks.
When the Navbar is collapsed and I click on the one of the links e.g 'Contact Us' the Navbar collapses and then the pages starts to scroll down to the bottom of the page where the contact us section is but then it reverts and moves back up to the top of the page to the home section. This happens for all the links.
I am using React components for the different sections of the pages.
When the Navbar is expanded the nav links move and stay at that section of the page so its only happening when the navbar is collapsed. Any thoughts on why this is happening? Thanks in advance!!
<Navbar collapseOnSelect key={expand} bg="white" expand={expand} className="mb-2 fs-5">
<Container fluid>
<Navbar.Brand href="#" className="navbar-brand mt-1">
<img src={logo} width="30" height="20" alt="Sunset Social Club Logo" className="logo" />
</Navbar.Brand>
<Navbar.Toggle className="navbar-toggle mt-4" aria-controls={`offcanvasNavbar-expand-${expand}`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
Sunset Social Club
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body className="offcanvas-body mt-4">
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#contactus">Home</Nav.Link>
<Nav.Link href="#posters">Posters</Nav.Link>
<Nav.Link href="#services">Services</Nav.Link>
<Nav.Link href="#contactus">Contact Us!</Nav.Link>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar