Is there a way to show collapsed sidebar content without causing overflow: visible?

I am using a fixed left .navbar and I want to display the content of the .collapse when my .navbar is toggled (stacked to the left). I have successfully implemented this, but when I try to scroll the .navbar while it is stacked, I have to set the .navbar to overflow: auto. However, if the overflow property is not set to visible when the .navbar is toggled, the menu in the .collapse is also not visible. How can I make the .navbar scrollable and show the content of the .collapse at the same time?

To better understand, refer to the picture below: https://i.sstatic.net/tptPt.png

CSS

.navbar {
    background-color: #152e4d;
    border-color: #12263f;
    position: fixed;
    overflow: auto;
    padding: 16px;
    min-height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030
}

.navbar.toggled {
    width: 6.5rem !important;
    padding: 0 !important;
}

.navbar.toggled .nav-item .collapse {
    background-color: #152e4d;
    border-radius: 5px;
    border: 1px solid #102137;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    max-height: 22rem;
    overflow-y: auto;
    position: absolute;
    left: calc(6.5rem + 1.5rem / 2);
    z-index: 1;
    top: 2px;    
}

HTML

<nav id="mainNav" class="navbar navbar-expand-md navbar-dark nav-left">

    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="">
        <i class="bi bi-currency-bitcoin"></i>
        <span>Brand</span>
    </a>

    <div class="navbar-collapse collapse" id="navbarsExampleDefault" style="">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active" href="">
                    <i class="bi bi-graph-up"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link" href="#collapse1" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapse1">
                    <i class="bi bi-box-seam"></i>
                    <span>Packages</span>
                </a>
                <div id="collapse1" class="collapse show" aria-labelledby="headingTwo" data-bs-parent="#navbarsExampleDefault">
                    <a class="dropdown-item">Action</a>
                    <a class="dropdown-item">Another action</a>
                    <a class="dropdown-item">Something else here</a>                    
                </div>
            </li>           
        </ul>
        
    </div>
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="mininavToggle"></button>
    </div>
</nav>
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

When dealing with children of fixed position elements, it's important to note that they share the same stacking context as their parent. This means properties like z-index and overflow are relative to the fixed parent element. As a result, any Collapse sub-menus within this structure would also need to be fixed position.

I encountered difficulties rendering your example in Bootstrap 5, but I have provided a functional demonstration here:

To achieve this effect, you can use CSS similar to the following:

.nav-item .collapsing {
    background-color: #152e4d;
    border-radius: 5px;
    min-width: 100px;
    max-height: 150px;
    overflow-y: auto;
    position: fixed;
    margin-top: -20px;
    margin-left: 80px;
}

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

Eliminate all HTML code between two specific markers

Is there a way to effectively delete all the HTML content located between two specific strings on a webpage, regardless of their positions and the content in between them? For example, <div class='foo'> <div class='userid'& ...

javascriptjqueryhtmlcssweb

Can you explain the techniques involved in creating the transitions and side effects on this website?

I recently came across a video showcasing some incredible websites with impressive effects. One of the standout sites featured was . As a novice in frontend development, I can't help but wonder how these stunning effects are created. ...

javascripthtmlcsseffects

Tips for assigning a preset value to a checkbox

Is there a simple way to set the default Checked value of this angular checkbox? <p class="card-text">Please let me know which public organizations have been notified.</p> <div for="stakeholders" class="custom-control custom-c ...

htmlangulartypescript

Maximize background width with a gradient that is compatible with web-based email clients such as Outlook and Gmail

Recently, I was given the task of creating a newsletter to support cancer fundraising. Excitedly, I accepted the assignment but encountered a frustrating issue with web-based email clients (such as outlook.com and gmail.com) not accepting some of my stylin ...

htmlcssemailcompatibility

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

cssinternet-exploreriframezooming

Modify the role attribute on elements in real-time to enhance accessibility

On a German website, we have implemented a textfield with autocomplete functionality in a form. As the user types into the input field, a dropdown menu of suggestions appears for them to select from. It is crucial that this feature is fully accessible with ...

htmlaccessibilitywai-arianvda

What is preventing my divs from aligning properly?

After trying various methods and conducting thorough research, I am still unable to resolve the issue with my code. Could someone please review it and provide some guidance? Any help would be greatly appreciated. I have experimented with different div wid ...

csshtmlfloating

What is the best way to display two items from a list while hiding the rest?

I received a list generated from the backend that looks like this: <ul> {% for item in items %} <li>{{item }}</li> {% endfor %} </ul> My goal is to display only the first two items and collapse the rest, possibly with a 's ...

jqueryhtmlcsstwitter-bootstrap-3

Issue with LESS CSS: Inability to divide two pixel units and provide a value without units

I want to temporarily strip the units from my variables @baseLineHeight and @baseFontSize so that I can divide them to get a relative line-height. Here is my attempt: @baseFontSize: 12px; @baseLineHeight: 18px; font: @baseFontSize~"/"@baseLineHeight/@baseF ...

csswebless

Disabling an HTML attribute on a button prevents the ability to click on it

In my React application, I have a button component that looks like this: <button onClick={() =>alert('hi')} disabled={true}>test</button> When I removed the disabled attribute from the browser like so: <button disabled>test& ...

javascripthtmlreactjs

Create a stylish frame for a uniquely shaped picture

   Currently working on a team page for a company, looking to incorporate an irregular-shaped png image with a red border. The desired outcome should resemble the following:             https://i.sstatic.net/ba7ek.png The image provided fo ...

htmlcssimage

Unusual encoding in the ajax response

I am trying to use the Ajax function from Jquery to send a string to my JavaScript file, but I am encountering an issue where weird question marks or diamond blocks are appearing before the string that I expect to receive. (function( $ ) { $.f ...

phpjavascriptjqueryhtmlcharacter-encoding

Exploring the depths of CSS table-cell and the impact of percentage-based

During my exploration of Github, I came across a fascinating menu display: If you pay attention, each item in the menu is assigned an equal width. In CSS, we typically give it a percentage value - but why? It's interesting to note that the parent div ...

htmlcsscss-tables

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

htmlcsstwitter-bootstrapbootstrap-4dropdown

Issues with z-index in a multi-column menu using React-Router are causing unexpected behavior

I am currently working on a multi-tier, multi-column menu created using the https://github.com/kontentino/react-multilevel-dropdown library. However, I am facing an issue where the submenu items are appearing under the main items despite several attempts t ...

javascriptcssreactjs

The div should remain at the top after the animation effect, instead of returning to its initial position when moving from the bottom to the top using CSS

I have successfully applied an animation effect to a div tag. Initially, the div is positioned at the bottom, but with the CSS animation effect, it moves to the top. However, after reaching the top position, it reverts back to the bottom. I want it to st ...

javascripthtmlcss

Use Html.ActionLink to trigger events in various sections of the code

I'm attempting to create an ActionLink that will trigger an action in a different section of the code. Here is what I have so far: <div class="col-md-4"> @Html.ActionLink("Click to Perform Action", "Action", "SomeController") </div> ...

htmlasp.net

Obtaining data from HTML tags using Beautifulsoup

Here is the complete HTML code that I am currently working with. Below is a simplified version of the HTML provided above: <table class="premium"> <tr class="retailer top-offer" data-pricer="47.84" saler-id=" ...

pythonhtmlparsingbeautifulsoupextract

What could be the reason for a missing button in the Bootstrap navbar on smaller devices?

I'm new to Bootstrap and noticed on smaller devices, there is no visible button to tap for displaying the menu items. However, tapping on the upper right-hand side does reveal them. What could I be missing here? index.html <!DOCTYPE html& ...

androidiosangularjstwitter-bootstrap

javascript When the <body> tag is loaded, the function "do_something()" is not functioning properly

I am having trouble with my JavaScript code. Here is the code: <!doctype html> <html> <head> <script> function do_something() { alert(a); var theBody = document.getElementsByTagName("body")[0]; ...

javascripthtml