Search code examples
htmlcsstypescriptnavbarreact-bootstrap

How can I show my Navbar.Brand image on mobile screens?

I have created a Navbar using React Boostrap however the brand image disappears on mobile screens. See below.

Navbar on desktop Navbar on desktop

Navbar on mobile Navbar on mobile

As you can see the logo goes into the menu when on mobile. How can I overwrite this so that the logo is on the navbar when on mobile?

See code below

<div>
              <Navbar className="planted-navbar" variant="dark" expand="lg">
                <Container className="navbar-container">
                  <Navbar.Toggle aria-controls="basic-navbar-nav" />
                  <Navbar.Collapse id="planted-navbar-collapse">
                    <Nav className="ml-auto">
                      <Navbar.Brand href="home" bsPrefix="planted-navbar-brand">
                      <img
                        src={plantedLogo}
                        width="150px"
                        // height="70px"
                        className="d-inline-block align-top"
                        alt="Restorify logo"
                      />
                    </Navbar.Brand>
                      <NavDropdown title="Missions" id="missions-dropdown">
                        <NavDropdown.Item href="county-select">Select a County</NavDropdown.Item>
                        <NavDropdown.Item href="mission-select">Select a Mission</NavDropdown.Item>
                      </NavDropdown>
                      <NavDropdown title="Dashboard" id="trees-dropdown">
                        <NavDropdown.Item href="dashboard">My Dashboard</NavDropdown.Item>
                        <NavDropdown.Item href="subscribeToTree">Subscribe To Tree</NavDropdown.Item>
                      </NavDropdown>
                      <NavDropdown title="Posts" id="posts-dropdown">
                        <NavDropdown.Item href="post-tile">Posts</NavDropdown.Item>
                        <NavDropdown.Item href="posts-to-write">Posts to Write</NavDropdown.Item>
                        <NavDropdown.Item href="write-a-post">Write a Tree Post</NavDropdown.Item>
                        <NavDropdown.Item href="login-mission-post" id="login-item">Write a Mission Post</NavDropdown.Item>
                      </NavDropdown>
                      <Nav.Link href="leaderboard" id="leaderboard-link">Leaderboard</Nav.Link>
                      <Nav.Link href="about" id="about-link">About</Nav.Link>
                      <Nav.Link href="login" id="login-link">Login</Nav.Link>
                    </Nav>
                  </Navbar.Collapse>
                </Container>
              </Navbar>
      </div>
Solution

  • Unless i'm misunderstanding something, just move the Navbar.Brand outside of the toggle area

    <div>
  <Navbar className="planted-navbar" variant="dark" expand="lg">
    <Container className="navbar-container">
      <Navbar.Brand href="home" bsPrefix="planted-navbar-brand">
        <img
          src={plantedLogo}
          width="150px"
          // height="70px"
          className="d-inline-block align-top"
          alt="Restorify logo"
        />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="planted-navbar-collapse">
        <Nav className="ml-auto">
          <NavDropdown title="Missions" id="missions-dropdown">
            <NavDropdown.Item href="county-select">Select a County</NavDropdown.Item>
            <NavDropdown.Item href="mission-select">Select a Mission</NavDropdown.Item>
          </NavDropdown>
          <NavDropdown title="Dashboard" id="trees-dropdown">
            <NavDropdown.Item href="dashboard">My Dashboard</NavDropdown.Item>
            <NavDropdown.Item href="subscribeToTree">Subscribe To Tree</NavDropdown.Item>
          </NavDropdown>
          <NavDropdown title="Posts" id="posts-dropdown">
            <NavDropdown.Item href="post-tile">Posts</NavDropdown.Item>
            <NavDropdown.Item href="posts-to-write">Posts to Write</NavDropdown.Item>
            <NavDropdown.Item href="write-a-post">Write a Tree Post</NavDropdown.Item>
            <NavDropdown.Item href="login-mission-post" id="login-item">Write a Mission Post</NavDropdown.Item>
          </NavDropdown>
          <Nav.Link href="leaderboard" id="leaderboard-link">Leaderboard</Nav.Link>
          <Nav.Link href="about" id="about-link">About</Nav.Link>
          <Nav.Link href="login" id="login-link">Login</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
</div>