Sidebar collapse using Bootstrap

I have been working on creating a collapsible sidebar that pushes the content on the right, but I'm facing issues with responsiveness. When I display the sidebar, the content is getting compressed instead of pushed. I tried adding flex-shrink-0 to the main part, which resolved the pushing behavior but caused loss of responsiveness. I'm aiming for a design similar to the minimized view of Font Awesome, but I'm struggling to explain it clearly.

If I use the following CSS code for the collapsing sidebar width, it partially solves the issue:

#sidebar.collapsing.width {
    height: auto;
    width: 0;
    overflow: hidden;
    transition: width .35s ease;
}

You can check the full code at https://fontawesome.com/.

csstwitter-bootstrapbootstrap-5

Answer №1

It appears that the solution you are seeking involves adding the class w-100 to the main content in order to force it to be 100% width.

<div class="d-flex align-items-stretch vh-100 overflow-hidden ">
    <nav>
        <div id="sidebar" class="h-100 collapse width show">
            <div class="h-100 d-flex flex-column p-2 text-white bg-dark" style="width: 280px;">
                ....
            </div>
        </div>
    </nav>
    <div class="flex-shrink-0 overflow-auto bg-light w-100">
        <nav class="d-flex bg-white shadow-sm" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <button id="toggle-sidebar" class="btn ms-2 me-3 py-3" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-expanded="true" aria-controls="sidebar">
                <span class="bi bi-list"></span>
            </button>
            <ol class="breadcrumb mb-0 pt-3">
                <li class="breadcrumb-item">
                    <a href="#">
                        <span class="bi bi-house-door-fill"></span> Home </a>
                </li>
            </ol>
        </nav>
        <main class="my-3 px-3">
            <p> .... </p>
        </main>
    </div>
</div>

Check out the Demo for more information

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

strange occurrences of bootstrap.min.css.map popping up

While working on my e-commerce website using Node, Express, Mongoose, and Bootstrap, I encountered an unexpected issue related to "bootstrap.min.css.map". The error 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model " ...

htmlcssnode.jsexpressbootstrap-4

Tips for organizing your CSS from scratch without relying on a pre-existing framework such as bootstrap, bulma, or materialize

As I embark on a new Angular project, the decision has been made to create our own component library instead of using frameworks like Bootstrap, Bulma, or Materialize. Despite some initial research, I'm feeling a bit lost on where to begin (other than ...

cssangularsasscomponentscss-frameworks

Why do my tablet media queries take precedence over mobile view media queries?

I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...

cssresponsive-designmedia-queriesstyling

When resizing the browser or changing resolution, one div may cover another div

After generating the HTML on my ASP.NET page, everything looks good initially. However, I noticed that when I adjust the screen resolution or reduce the browser size, the image in the logoplace div starts to overlap. It appears to be an issue with absolute ...

csshtml

Issue with rendering Html Element on FireFox compared to Chrome

Having some trouble with an individual component (a simple dropzone) while testing on Firefox. It seems to work fine on Chrome, and the CSS looks good. Css .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); wi ...

javascripthtmlcss

The animation of react-circular-progressbar is experiencing a slight delay of one second

I managed to create a circular progress bar with a timer and a button that adds +10 seconds to the timer. However, I'm facing a 1-second delay in the animation of the progress bar when clicking on the button. If anyone could assist me in resolving t ...

javascripthtmlcssreactjscountdowntimer

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

javascriptjqueryhtmlcss

Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly ...

htmlcss

The combination of absolute positioning and percentage-based height measurements allows for

For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...

htmlcssheightcss-position

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

For a few years now, I have been utilizing a pure CSS navigation system. However, with the recent increase in mobile site projects at my workplace, I am encountering issues with drop-down menus not functioning properly on mobile devices. Despite this chall ...

javascriptjquerycsscss-selectors

Excessive Spacing Below Picture

I am trying to position an image and a div directly beneath it, but I am encountering an issue with a visible margin between the two elements. You can view the code snippet here: http://jsfiddle.net/d3Mne/1/ Upon further investigation, I have noticed that ...

htmlcss

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

Expanding the header in Ionic 3 with a simple click event

I have successfully implemented an Expandable Header in Ionic 3 following a tutorial from Joshmorony. The header expands perfectly on scroll, as you can see in this GIF: However, I am facing an issue where I want to expand the header on click instead of o ...

htmlcsstypescriptionic-frameworkangular5

"Maximizing battery life: Efficient video playback on iOS in low power

Summary: I am currently working on a website that features a video set as the background which autoplays. However, I have encountered an issue on iOS devices when "Low Power Mode" is activated - the video fails to play and instead displays a large "Play" i ...

javascripthtmlcssioswordpress

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows: ul ul ul.good li ... li li <a href="/findme">findme</a> ul . ...

jqueryhtmlcssfindparent-child

When the browser width is reduced, the text appears outside of the image

When pasting text into an image in this example, everything looks fine at first. However, as the browser width is reduced, the text starts slipping out of the picture. To make matters worse, unsightly line breaks are also added. Is there a way to prevent ...

htmlimagecss

A modern CSS solution for a fixed columns and header layout in a scrollable table

How can I create a table with minimal JavaScript using modern CSS? I am aiming to include the following features: Fixed column(s) (positioning and width) Scrollable in both X and Y axes Responsive in the X axis (for non-fixed width columns). https://i. ...

javascripthtmlcsshtml-table

The font color fails to change when hovering over

I'm experiencing an issue with the styling of my input box. When the user starts typing, a div containing a list of possible clubs is displayed. Currently, I am having trouble with the .clubLink:hover class and its background color. CSS: <style& ...

jqueryhtmlcss

The change() function in jQuery appears to have a glitch where it does not properly execute during the initial onclick event, but functions correctly for

Here is the button code snippet: <li class="cnt-li"> <button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal"> <img src="images/add.png" alt="Add Container"> </button> </li> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for effectively displaying elements on a page

After making changes to my css/html code, all the elements within a div are now displayed in a single line instead of appearing as separate <p>contents</p> tags with each on a new line. An example of this issue can be seen here: Dealing with C ...

htmlcss