Upon loading my Bootstrap 5 webpage, the toggle button successfully moves the navbar and body section to show or hide the full sidebar. However, an issue arises where the body section goes behind the sidebar when using the toggle button.
Below is a portion of the html file:
{% extends "base.html" %}
{% block content %}
<!-- Sidebar section -->
<nav class="navbar navbar-expand d-flex flex-column align-item-start" id="sidebar">
<div class="p-4 pt-5">
<!-- User image -->
<div class="text-center">
<img src="{{url_for('static',filename='profile_pics/two.jpg')}}" class="rounded" alt="Profile">
</div>
<!-- Navbar menus -->
<ul class="navbar-nav d-flex flex-column mt-5 w-100">
<li class="nav-item dropdown w-100">
<a href="#equitiesSubmenu" class="nav-link dropdown-toggle text-light pl-4" id="equitiesSubmenu" role="button" data-bs-toggle="collapse" aria-expanded="true">Equities</a>
<ul class="collapse lisst-unstyled" id="equitiesSubmenu">
<li><a href="{{url_for('core._simulator')}}" class="dropdown-item text-light pl-4 p-2">Simulator</a></li>
<li><a href="{{url_for('core.portfolio')}}" class="dropdown-item active text-light pl-4 p-2">Portfolio</a></li>
</ul>
</li>
</ul>
<br>
</nav>
<!-- Container for the body page -->
<section class="my-container">
<div class="row">
<div class="col-md-12">
<div class="bg-light p-3">
<!-- Container for the toggle button and topbar -->
<div class="container">
<div class="row">
<!-- Bootstrap Icons -->
<div class="col">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b584914505a56574a7908170c1709">[email protected]</a>/font/bootstrap-icons.css">
<!-- Sidebar Toggle Button -->
<button class="btn btn-primary float-start" id="menu-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
</div>
</div>
</div>
</section>
<!-- JS To Activate Sidebar -->
<!-- bootstrap js -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63130c131306114d091023524d52554d52">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce2fce3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- custom js -->
<script>
var menu_btn = document.querySelector("#menu-btn")
var sidebar = document.querySelector("#sidebar")
var container = document.querySelector(".my-container")
menu_btn.addEventListener("click", () => {
sidebar.classList.toggle("active-nav")
container.classList.toggle("active-cont")
})
</script>
{% endblock %}
This portion involves the style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
body {
min-height: 100vh;
background-color: #fff; }
.navbar {
width: 250px;
height: 100vh;
position: fixed;
background-color: #212529;
transition: 0.4s; }
.nav-link {
font-size: 1.25em; }
.nav-link:active, .nav-link:focus, .nav-link:hover {
background-color: #c0c2c5; }
.dropdown-menu {
background-color: #be1ca9; }
.dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
background-color: #a81219; }
.my-container {
transition: 0.4s;
margin-left: 250px; }
/* for navbar */
.sidebar {
z-index: 0; }
.active-nav {
margin-left: 0; }
/* for main section */
.active-cont {
margin-left: 0px;
z-index: 1; }
.footer p {
color: rgba(255, 255, 255, 0.5); }
The webpage appears as shown below initially before toggling the sidebar:
https://i.sstatic.net/bTDkA.png
After toggling to hide the sidebar, the webpage looks like this: