I have successfully created a side NavBar using Bootstrap 5, but I'm facing an issue where my text is getting hidden behind the navbar. Any suggestions on how I can resolve this?
Below is the code for my 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>
)}
</>
);
Here is the CSS I am using:
.navbar {
width: 210px;
height: 100vh;
position: fixed;
/* margin-left: -300px; */
background-color: darkgray;
}
Current look of my app can be seen here: https://i.sstatic.net/wiPry.png
While the password form is visible, the username form is obstructed by the navbar. Any guidance on how to improve this would be highly appreciated. Thank you!