1

I'm trying to make a navbar with its items on the right side of the screen, and the <Navbar.Brand> on the left. I managed to do it, however, when I change the screen to a phone screen size, the hamburger moves to the bottom of the Navbar.Brand. I am assuming its the where I placed my <Navbar.Brand> into is what could be causing it. But without that, I could not make the items move to the right either.

return (
        <Navbar bg="light" expand="md" > {/*className="fixed-top"*/} 
            <Container >
                <Navbar.Brand as={Link} to="/">
                    Logo
                </Navbar.Brand>     
            </Container>
            <Navbar.Toggle aria-controls="basic-navbar-nav"/>
            <Navbar.Collapse id="basic-navbar-nav" className="me-5" >
                <Nav className="ms-auto">
                    <Nav.Link as={NavLink} to="/">Products</Nav.Link>
                    <Nav.Link as={NavLink} to="">Cart</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )

This is how it looks like before collapsing

and how it looks at "md" size

Finally this is what the problem is

Ezra
  • 802
  • 4
  • 11
Don
  • 21
  • 2
  • I realize the img links are not arranged at all. this is my bad. I hardly even posts question here in stackoverflow, and for some reason i cannot find where to edit my question. So here are the images again, First one is how it looks on bigger sized screens and how I want it to look https://i.stack.imgur.com/UtmCV.png Next is how it looks once collapsed https://i.stack.imgur.com/u90rS.png And finally this is what I could not fix https://i.stack.imgur.com/ZRcZa.png I want the hamburger to stay on the right at all times. but somehow I'm doing something wrong – Don Oct 22 '22 at 01:41

0 Answers0