Just starting out with coding and tackling my initial project using reactJs and bootstrap 5. My aim is to create a sticky side navbar that remains fixed on the side while my content displays next to it, even when navigating through different routes. Unfortunately, at the moment, my content ends up rendering underneath the sidebar.
Below is the code snippet for my side navBar:
const Navbar = ({ handleClick, isLoggedIn, email }) => (
<div>
<nav
className="navbar navbar-expand d-flex flex-column align-item-center-start"
id="sidebar"
>
<a href="/" className="navbar-brand text-light mt-2">
<div className="display-6 font-weight-bold">
<span>SPODify +</span>
</div>
</a>
<ul className="navbar-nav d-flex flex-column w-100 mt-4">
(...)
</ul>
<div className="navbar navbar-expand d-flex flex-column-reverse align-item-center-start">
<ul className="navbar-nav d-flex flex-column-reverse w-100 mt-4">
(...)
</ul>
</div>
</nav>
</div>
);
Here's an overview of my CSS file:
body {
(...)
}
a {
(...)
}
label {
(...)
}
(...)
I have an App file which serves as the entry point for my app, ensuring the side Navbar persists across route changes:
const App = () => {
return (
<div className="main">
<div className="wrapper">
<Navbar />
</div>{" "}
<div className="content">
<Routes />
</div>
</div>
);
};
I believed wrapping my nav component in one div tag and placing my routes within another div tag would solve the display issue.
This is the current appearance of my website :
https://i.sstatic.net/bFphx.jpg
I'm aiming to have the podcast cards displayed alongside my side Navbar, any guidance on achieving this setup would be highly appreciated! I've been trying to crack this for some time now without success. Thank you in advance!