Bootstrap 5, content slides behind sidebar when screen resizes-CodePudding

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 >
            <div >
                <a  asp-area="" asp-controller="Home">
                    <img src="~/images/LogoGrey.png" style="width:140px; margin-left: 30px"/>
                </a>
                <div  style="height: 40px; margin-left: 50px">
                    <div ></div>
                </div>
                <button  type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div >
                    <ul >

                    </ul>
                </div>
                <i  style="margin-right: 20px; font-size:larger"></i>
                <i  style="margin-right: 20px; font-size:larger"></i>
                <div  style="height: 40px; margin-right:20px">
                    <div ></div>
                </div>
                <span >
                    <img  style="width: 40px; height: 40px;" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg">
                    Jane Doe
                </span>
                <div  style="height: 40px; margin-left:20px" >
                    <div ></div>
                </div>
                <span  style="padding-left:20px; margin-right: 20px; padding-top: 5px">
                    Logout
                </span>
            </div>
        </nav>
    </header>

    <!-- Side Nav-->
    <nav >
        <nav >
            <div id="sidebar" >
                <ul  id="nav_accordion">
                    <li >
                        <a  asp-action="Index" asp-controller="Home" style="color: whitesmoke; padding-left: 10px"> Home </a>
                    </li>
                    <li >
                        <a  href="#" style="color: whitesmoke; padding-left: 10px"> Dashboard  </a>
                    </li>
                    <li >
                        <a  href="#" style="color:whitesmoke; padding-left: 10px"> Setup </a>
                        <ul  style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190);">
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> General Settings </a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Regions</a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Stores</a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Service Areas</a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Departments</a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Categories</a></li>
                        </ul>
                    </li>
                    <li >
                        <a  href="#" style="color: whitesmoke; padding-left: 10px"> Contacts  </a>
                        <ul  style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
                            <li><a  asp-area="" asp-controller="Users" asp-action="UsersIndex" style="color: whitesmoke; word-spacing: normal; padding-left: 50px"> Users </a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Customers </a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Suppliers </a></li>
                        </ul>
                    </li>
                    <li >
                        <a  href="#" style="color: whitesmoke; padding-left: 10px"> Recipes  </a>
                        <ul  style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Products </a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Components </a></li>
                            <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Finished Products </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </nav>

    <div >
        <main role="main" >
            @RenderBody()
        </main>
    </div>

    <footer >
        <div  style="margin-left:10px">
            <label>
                &copy; 2022 - TasteWise International
            </label>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

CodePudding user response：

If you want the sidebar on the left and page content on the right, they should be placed in the same parent div. Then control the width of the two part of the div.

Change your code below:

<style>
    #sidebar {
        position: fixed;
        width: 250px;
        z-index: 1000;
        left: 0;
        top: 68px;
        bottom: 60px;
        display: block;
        background-color: rgb(95,131,183);
    }
    .main {
        margin-left: 250px; /* Same width as the sidebar   left position in px */
    }
    .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 >
            <div >
                <a  asp-area="" asp-controller="Home">
                    <img src="~/images/LogoGrey.png" style="width:140px; margin-left: 30px"/>
                </a>
                <div  style="height: 40px; margin-left: 50px">
                    <div ></div>
                </div>
                <button  type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div >
                    <ul >

                    </ul>
                </div>
                <i  style="margin-right: 20px; font-size:larger"></i>
                <i  style="margin-right: 20px; font-size:larger"></i>
                <div  style="height: 40px; margin-right:20px">
                    <div ></div>
                </div>
                <span >
                    <img  style="width: 40px; height: 40px;" src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg">
                    Jane Doe
                </span>
                <div  style="height: 40px; margin-left:20px" >
                    <div ></div>
                </div>
                <span  style="padding-left:20px; margin-right: 20px; padding-top: 5px">
                    Logout
                </span>
            </div>
        </nav>
    </header>
                              <!-- modify start-->

<div >
    <!-- Side Nav-->
    <div id="sidebar" >
        <ul  id="nav_accordion">
            <li >
                <a  asp-action="Index" asp-controller="Home" style="color: whitesmoke; padding-left: 10px"> Home </a>
            </li>
            <li >
                <a  href="#" style="color: whitesmoke; padding-left: 10px"> Dashboard  </a>
            </li>
            <li >
                <a  href="#" style="color:whitesmoke; padding-left: 10px"> Setup </a>
                <ul  style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190);">
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> General Settings </a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Regions</a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Stores</a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Service Areas</a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Departments</a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Categories</a></li>
                </ul>
            </li>
            <li >
                <a  href="#" style="color: whitesmoke; padding-left: 10px"> Contacts  </a>
                <ul  style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
                    <li><a  asp-area="" asp-controller="Users" asp-action="UsersIndex" style="color: whitesmoke; word-spacing: normal; padding-left: 50px"> Users </a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Customers </a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Suppliers </a></li>
                </ul>
            </li>
            <li >
                <a  href="#" style="color: whitesmoke; padding-left: 10px"> Recipes  </a>
                <ul  style="padding-left: 0px; padding-right: 0px; background-color:rgb(115,141,190)">
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Products </a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Components </a></li>
                    <li><a  href="#" style=" color: whitesmoke; word-spacing: normal; padding-left: 50px"> Finished Products </a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div >

        <main role="main" >
            @RenderBody()
        </main>
    </div>
</div>
                              <!-- modify end-->

    <footer >
        <div  style="margin-left:10px">
            <label>
                &copy; 2022 - TasteWise International
            </label>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>