I'm currently in the process of designing my main webpage and have encountered an issue with the sidebar. While the menus are displaying correctly on the left side, the sidebar background and width are not functioning properly. As a result, only the menu titles and submenus are visible...
This is the basic layout I've created for the page using this stylesheet file. The problem seems to arise after the Side Bar comment section, as it fails to execute...
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
/* Side Bar */
.wrapper {
display: flex;
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f6e8f6eba4a3b2a7f5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Slider</h3>
</div>
<ul class="lisst-unstyled components">
<p>The Providers</p>
<li class="active">
<a href="#homeSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="Collapse lisst-unstyled" id="homeSubmenu">
<li>
<a href="#">Home 1</a>
</li>
<li>
<a href="#">Home 2</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#pageSubmenu" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
<ul class="collapse lisst-unstyled" id="pageSubmenu">
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
</ul>
</li>
<li>
<a href="#">Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
<br><br>
<h2>Collapsible Sidebar using Bootstrap 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate repellat quaerat recusandae adipisci voluptate soluta tenetur ex possimus, ipsa numquam eius, ullam distinctio. In similique delectus, ut numquam quas consequuntur!
</p>
<div class="line"></div>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quidem laboriosam amet, nam vel officiis placeat ipsum reprehenderit iste minus quisquam molestiae necessitatibus? Provident fugiat, architecto praesentium hic quidem aliquam.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2c203d2a0f7d6176617e">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e6363787f787e6d7c4c39223c223c216e69786d3f">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous">
</script>Can anyone provide guidance on how to resolve this issue?