When the screen size changes, the sidebar in Bootstrap 5 smoothly reveals hidden content

I've been working on a sidebar design and everything seems to be going well so far. However, I've encountered an issue that has been giving me trouble for days now. Whenever I display a new page and then resize the screen, the content of the page ends up sliding behind the sidebar. Is there any way to prevent this from happening? I want the sidebar to remain fixed in size regardless of the screen size. Below is the code from my _layout page, hopefully someone can help me identify 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>
   <!-- Your HTML code here -->

    @await RenderSectionAsync("Scripts", required: false)
</body>

Thank you, AJ

cssasp.net-corebootstrap-5

Answer №1

For a layout with the sidebar on the left and page content on the right, it's essential to place them within the same parent div. You can then control the width of each part of the div using CSS.

Here is an updated version of your code:

<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; /* Adjust width according to the sidebar */
    }
    .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>
        <!-- Navigation Bar -->
    </header>
                              <!-- modify start-->

<div class="container">
    <!-- Sidebar Section -->
    <div id="sidebar" class="sidebar">
        <!-- List Items in the Sidebar Menu -->
    </div>

    <div class="main">

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

    <footer class="navbar-light bg-light footer">
        <div class="col-4" 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/bootstrap/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hide all the div elements on the web page and only display one when a button is clicked

I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load. Buttons: <button class="btn btn-outline-primar ...

javascriptcsshtml

Toggle between list elements using the inner text of the elements with jQuery

My issue lies in figuring out why my filter function isn't properly working for toggling li elements. JavaScript: $("#searchbox1").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#menulist li") ...

javascriptjqueryhtmlcsslist

Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome. .container { background-color: #e6e6e6; width: 400p ...

htmlcsshover

Utilizing transitions to control the visibility of div elements

This is what I have achieved so far: function getOffsetRect(elem) { var box = elem.getBoundingClientRect() var body = document.body var docElem = document.documentElement var scrollTop = window.pageYOffset || docElem.scrollTop || body.sc ...

javascripthtmlcss

Positioning the Submenu in Elementor Site

I've been working on creating a vertical navigation menu with a horizontal submenu for my website using Elementor. While I've made some progress, I'm struggling to position the submenu correctly. My goal is to have the submenu display next t ...

htmlcsselementor

Utilizing HTML and CSS allows for creating a responsive layout with three elements such as this

Need help with CSS to align three elements in a row, where the first two are on the left and the third is on the right. The layout should adjust so that when the window size is smaller, the second element moves below the first while the third element stays ...

htmlcssresponsive-design

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

What is the best way to make a message appear only when the browser screen is smaller?

I am struggling to make a message appear only when the screen is resized. It's puzzling me why my current approach isn't yielding the desired result. Instead of displaying the message only on a shrunk screen, it shows up all the time. I can confi ...

htmlcss

What methods are available to incorporate arithmetic when defining a style attribute?

Is there a way to achieve arithmetic operations in CSS, like calculating margin-left: -60px + 50% of the width of the parent div? I'm eager to find a solution, whether it involves JavaScript or any other method. Any help would be greatly appreciated. ...

javascripthtmlcss

How can I ensure my custom CSS stylesheet takes precedence over Inline CSS when working with Bootstrap?

Looking to enhance the visual appeal of my website by incorporating CSS properties for background changes. Take a peek at my code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...

htmlcssbootstrap-5

What is the best way to animate specific table data within a table row using ng-animate?

Are you working with Angular's ng-repeat to display a table with multiple rows? Do you wish to add an animation effect to specific cells when a user hovers over a row in the table? In the scenario outlined below, the goal is to have only certain cell ...

javascripthtmlcssangularjsgsap

What is the reason behind the angular http client's inability to detect plain text responses?

When I make a call to httpClient.get, I notice in Fiddler that both the request and response headers have text/plain format. Request: Accept: application/json, text/plain, */* Response: Content-Type: text/plain; charset=utf-8 Even though I am returning a ...

jsonangularasp.net-core

How can I incorporate dynamic moving lines into my website's loading sequence?

Link to Gyazo image 1: https://gyazo.com/015425f0decb187e28b620c1e3206391 Issue with first image: https://gyazo.com/dfcd33e8a4fd5bea64e51fe40556f0bf I'm currently working on a website and came up with a cool concept of having two lines crossing the s ...

htmlcss

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

javascriptjquerycss

Photo attached at the bottom of each container

Here is the link to my code snippet: fiddle. I am struggling with aligning shopping bag icons at the bottom of each box on my webpage. I want all boxes to have the same height, so I used display: table-cell; in the box_left div. However, placing the shopp ...

htmlcss

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

Tips for ensuring a static html element remains visible at the bottom of the screen even when the soft keyboard is opened in iOS Safari

Within a webpage, there is an input field and a fixed div positioned at the bottom of the window using CSS properties such as position:fixed; and bottom:0;. To better illustrate this setup, I have created a Codepen demo which can be viewed here: https://c ...

htmlioscsssafarikeyboard

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

csshtml

What is the best way to include a search box in the mobile view between the brand and menu toggle?

Is there a way to place the search bar between the brand and menu toggle on the mobile view without it appearing on a separate row either under or over the navbar? I've been trying to override some Bootstrap CSS but haven't found a solution yet. ...

htmlcsstwitter-bootstrap

What is the best way to automatically adjust the size of an image to fit its

One of the challenges with the parent container is fitting an image inside it: .parent { position: relative; text-align: center; overflow: hidden; display: flex; align-items: center; align-content: center; justify-content: cente ...

htmlcss