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•15mo ago
Message Not Public
Sign In & Join Server To View
Thanks for your reply. Is a screenshot of how the menu appears on small screens ok?
how it appears on largescreens
@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,