Geethika
Geethika2y ago

Hamburger menu items not displaying one below the other

I am using react-bootstrap Navbar in my project. I have currently divided Navbar into 2 rows by means of unordered list. When I shrink window size on my desktop / view in mobile, the hamburger menu items are displayed one next to eachother and not below eachother. Please help! <Navbar expand="lg" expanded={collapsed} > <Container fluid> <Link href="/" passHref> <Navbar.Brand className="py-1"> <img src="/content/svg/logo.svg" width="140" height="33" alt="Directory logo" /> </Navbar.Brand> </Link> {/* </div> /} <Navbar.Toggle aria-controls="navbar-main-menu" onClick={() => setCollapsed(!collapsed)} /> <Navbar.Collapse id="navbar-main-menu "> <Nav className="ms-auto align-items-lg-auto"> {/ <Nav.Link href="/">Home</Nav.Link> /} <div classname='d-flex flex-column'> <div className="d-flex flex-row justify-content-end" style={{margin:'0 0 3px 0'}}> <ul style={{ listStyleType: 'none' ,margin:'0 0 1px 0'}} > <li > <TopNav /> </li> </ul> </div> <div className="d-flex flex-row justify-content-end"> <ul style={{ listStyleType: 'none' }} > <li> <div className="d-flex flex-row justify-content-end" > ... {!dataSession.session && <Nav.Link href="/signup" passHref>Register</Nav.Link>} {!dataSession.session && <Nav.Link href="/login" passHref>Sign In</Nav.Link>} {!dataSession.session && <Nav.Item key={"Add-listing"} className={ "mt-3 mt-lg-0 ms-lg-3 d-lg-none d-xl-inline-block" } > <ActiveLink activeClassName="active" href={{ pathname: '/login', query: { from: 'add-listing' }, }} passHref > <Button onClick={() => onLinkClick(item.title)} > Add a Listing </Button> </ActiveLink> </Nav.Item>} {/ </div> /} {/ USER MENU /} {/ <div className="col"> /} {dataSession.session && <UserMenu onLinkClick={onLinkClick} />}</div> {/ USER MENU /} {/ </div> */} </li> </ul> </div> </div> </Nav> </Navbar.Collapse> </Container> </Navbar>
5 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Geethika
Geethika2y ago
Thanks for your reply. Is a screenshot of how the menu appears on small screens ok?
Geethika
Geethika2y ago
Geethika
Geethika2y ago
how it appears on largescreens
Geethika
Geethika17mo ago
@Bao Huynh please check
Was able to resolve the problem by modifying code. Removed the second component from the unordered list and put it in a div. And also, moved <Navbar.Toggle aria-controls="navbar-main-menu" onClick={() => setCollapsed(!collapsed)} /> <Navbar.Collapse id="navbar-main-menu "> anove the div I put the second unordered list content in,