Text hidden behind my Bootstrap 5 Side Navbar-CodePudding

I'm trying to create a side NavBar(with Bootstrap 5) which I achieved but my text is being hidden behind the navbar. Any tips on how I can fix this?

This is my code for side Navbar:

const Navbar = ({ handleClick, isLoggedIn, email }) => (
  <>
    <nav
      className="navbar navbar-expand d-flex flex-column align-item-center-start"
      id="sidebar"
    >
      <a href="/" className="navbar-brand text-light mt-8">
        <div className="display-6 font-weight-bold">
          <span>TESTING</span>
        </div>
      </a>
      <ul className="navbar-nav d-flex flex-column w-100">
        <li className=" h-25 nav-item border-bottom">
          <a href="/" className="nav-link text-light pl-4">
            HOME
          </a>
        </li>

        <li className="h-25  nav-item border-bottom">
          <a href="#" className="nav-link text-light ">
            SEARCH
          </a>
        </li>

        <li className="nav-item h-10 border-bottom">
          <a href="/show" className="nav-link text-light ">
            PODCASTS
          </a>
        </li>

        <li className="nav-item h-25 border-bottom">
          <a href="#" className="nav-link text-light pl-4">
            YOUR LIBRARY
          </a>
        </li>

        <li className="nav-item h-25 border-bottom">
          <a href="/login" className="nav-link text-light pl-4">
            LOGIN
          </a>
        </li>
        <li className="nav-item h-25 border-bottom">
          <a
            href="#"
            onClick={handleClick}
            className="nav-link text-light pl-4"
          >
            LOGOUT
          </a>
        </li>
      </ul>
    </nav>
    {isLoggedIn ? (
      <LoggedInNav
        handleClick={handleClick}
        isLoggedIn={isLoggedIn}
        email={email}
      />
    ) : (
      <div>
        {/* The navbar will show these links before you log in
        <a href="/login">Login(Spotify)</a>
        <Link to="/signup">Sign Up</Link> */}
      </div>
    )}
  </>
);

and my CSS:

.navbar {
  width: 210px;
  height: 100vh;
  position: fixed;
  /* margin-left: -300px; */
  background-color: darkgray;
}

This is what my app currently looks like :

You can see the password form, but my username form is blocked by my navbar.

Any tips would be greatly appreciated, thanks!

CodePudding user response：

Using position: fixed; removes this element from the normal content flow. This means that the element can now be on top (or under) other elements and is relatively positioned to the body.

If you want to display both besides each other, you're best bet would be to have another flex container around (instead of a fragment).

Here's an example: https://codesandbox.io/s/sharp-mclean-tpropv

/* React */
import "./styles.css";

export default function App() {
  return (
    <div className="wrapper">
      <nav className="nav">Hello World</nav>
      <div className="other">Login Form</div>
    </div>
  );
}

/* CSS */
.wrapper {
  display: flex;
  height: 100vh;
}

.nav {
  width: 210px;
  height: 100vh;
  background-color: darkgray;
}

.other {
  /* ... */
}