I'm building a sidebar, and so far its looking good . The only issue I have been struggling with for days now, is that when I show a new page and then resize the screen, the page content slides behind the sidebar. Is there any way to prevent this form happening ? I dont want the sidebar to resize as the screen shrinks. Below is the code form my _layout page, I'm hoping someone can spot what I'm doing wrong.
<style>
#sidebar {
position: fixed;
width: 250px;
z-index: 1000;
left: 0;
top: 68px;
bottom: 60px;
display: block;
background-color: rgb(95,131,183);
}
.nav-item {
border-bottom-color: #9EB4D3 !important;
word-spacing: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.nav-link:hover {
background-color: #373443;
}
</style>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home">
<img src="~/images/LogoGrey.png" style="width:140px; margin-left: 30px"/>
</a>
<div class="d-flex" style="height: 40px; margin-left: 50px">
<div class="vr"></div>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
</ul>
</div>
<i class="bi bi-search" style="margin-right: 20px; font-size:larger"></i>
<i class="bi bi-bell" style="margin-right: 20px; font-size:larger"></i>
<div class="d-flex" style="height: 40px; margin-right:20px">
<div class="vr"></div>
</div>
<span class="float-right">
<img class="img-thumbnail rounded-circle" style="width: 40px; height: 40px;" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg">
Jane Doe
</span>
<div class="d-flex" style="height: 40px; margin-left:20px" >
<div class="vr"></div>
</div>
<span class="form-label" style="padding-left:20px; margin-right: 20px; padding-top: 5px">
Logout
</span>
</div>
</nav>
</header>
<!-- Side Nav-->
<nav class="navbar">
<nav class="navbar-nav">
<div id="sidebar" class="sidebar">
<ul class="nav flex-column" id="nav_accordion">
<li class="nav-item border-bottom">
<a class="nav-link bi bi-house" asp-action="Index" asp-controller="Home" style="color: whitesmoke; padding-left: 10px"> Home </a>
</li>
<li class="nav-item border-bottom">
<a class="nav-link bi bi-speedometer" href="#" style="color: whitesmoke; padding-left: 10px"> Dashboard </a>
</li>
<li class="nav-item has-submenu border-bottom">
<a class="nav-link bi bi-gear" href="#" style="color:whitesmoke; padding-left: 10px"> Setup </a>
<ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190);">
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> General Settings </a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Regions</a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Stores</a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Service Areas</a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Departments</a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Categories</a></li>
</ul>
</li>
<li class="nav-item has-submenu border-bottom">
<a class="nav-link bi bi-people" href="#" style="color: whitesmoke; padding-left: 10px"> Contacts </a>
<ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
<li><a class="nav-link bi bi-caret-right" asp-area="" asp-controller="Users" asp-action="UsersIndex" style="color: whitesmoke; word-spacing: normal; padding-left: 50px"> Users </a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Customers </a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Suppliers </a></li>
</ul>
</li>
<li class="nav-item has-submenu border-bottom">
<a class="nav-link bi bi-journal-text" href="#" style="color: whitesmoke; padding-left: 10px"> Recipes </a>
<ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Products </a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Components </a></li>
<li><a class="nav-link bi bi-caret-right" href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Finished Products </a></li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="navbar-light bg-light footer">
<div class="col-4" style="margin-left:10px">
<label>
© 2022 - TasteWise International
</label>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
Many thanks AJ