Bulma Burger Dropdown rendering under other elements

[Matt2298]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I am sure this issue is not a duplicate

Description

I am trying to use the Bulma burger menu when the viewport is smaller than a specific size. I am using react and for some reason i'm unsure of, the dropdown menu that appears when clicking the burger icon seems to be below the rest of the content on the page.

Steps to Reproduce

<nav className="navbar is-transparent" aria-label="main navigation">
    <div className="container">
        <div className="navbar-brand">
            <Link className="navbar-item" to={'/'}>
                <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
            </Link>

            <div className={navBurgerClassName} data-target="navMenu" onClick={() => this.toggleDropDown()}>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

        <div className={navClassName} id="navMenu">
            <div className="navbar-end">
                <Link className="navbar-item" to={'/'}>Home</Link>
                <p className="navbar-item">About</p>
                <p className="navbar-item">Our People</p>
                <p className="navbar-item">Our Values</p>
                <p className="navbar-item">Children's Voices</p>
                <div className="navbar-item has-dropdown is-hoverable">
                    <p className="navbar-link" >More</p>
                    <div className="navbar-dropdown">
                        <p className="navbar-item">Contact Us</p>
                        <Link className="navbar-item" to="/gallery">Gallery</Link>
                        <Link className="navbar-item" to="/events">Events</Link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

Expected behavior

The Menu should render above the content on the page, however it is pushed under each of the components except the hero image. I have tried setting the navMenu components z-index to 1000 as seen below but still no affect.

Actual behavior

Is pushed under other components as can be seen in the image below.

[VizuaaLOG]

A JS Fiddle or something similar would be awesome to help diagnose this.

Just a shot in the dark here (I could be wrong) but I think the navbar or drop-down has a transparent or no background set... like I said I could be wrong here and it may just be z-index related on the navbar itself.

Personally, though I haven't experienced this, the container where the about us text does that have a higher z-index set?

[Antisunny]

I've encounter the same problem, in which .dropdown-menu hides under .media-content even after set z-index to a large number.

[Antisunny]

THIS IS A BUG, I assure you. here is a JS F. link Bulma dropdown bug

• click the level-right first item (red circle), there should be a popup(dropdown), scroll up and u'll see the dropdown menu is hidden beneath.
• z-index won't make the dropdown visible.

[Antisunny]

This is a bug introduced in v0.6.2. v0.6.1 works properly.

[miquelProu]

Maybe it's a bug but if you don't touch z-index in any element works fine

[johnwebbcole]

I'm running into this as well and I'm having some background issues with @Matt2298's fix. Any progress on this bug? Thx.

[nickReyn]

Same issue here. Z-index set to 1 on the card and 20 on the dropdown menu, but still getting overlapped.

[aocneanu]

same problem with .dropdown-menu and .media-content

[cbzink]

This still seems to be happening in 0.7.1. Has anyone found a workaround?

Edit: To elaborate, in my case this is happening when the .navbar-dropdown would partially obscure a .card when open. Seems the .card is taking precedence.

[jsgv]

I am experiencing this issue when adding an sub navigation under the top navigation. Top navigation sub menu should display above the light gray one below.

[Ethiel97]

Hi ! Has anyone found a fix for this bug ?

[jsgv]

@Ethiel97 I just gave the topmost navbar a higher z-index.

[jsantari]

Having the same issue. No matter what z-index I try my dropdown menu is below the main content panel. Setting navbar as suggested did nothing. Update: my problem is caused by is-fixed-top on my nav. Remove it and it works fine. Not sure how this would be resolved?

[Ethiel97]

In my case the issue is I gave a position static to my navbar. After removing that property everything gets well. You can try it. I hope it will help you.

[fanomena-private]

+1

[fanomena-private]

removing z-index from any navbar items solves this but z-index won't apply to the dropdown-menu - no matter what you do, you cannot overwrite it

[hubertokf]

Still having this issue, any workaround?

[zrkb]

Overwrite $navbar-z according to your needs in sass/components/navbar.sass:7.

[aysark]

I set a lower z-index to the overlapping elements to fix.

    z-index: 1;

[Sykoah]

Cant seem to find a decent resolution at the moment but for my particular problem (select elements arrow) i implemented this patch.

.select:not(.is-multiple):not(.is-loading):hover::after {
    z-index: 4;
}

.select:not(.is-multiple):not(.is-loading)::after {
    z-index: 0;
}

Probably similar could be applied to other problem elements.

[thijsfranck]

I ran into this same issue using version 0.7.2. In my case, I have a dropdown-menu for every row of a table, but the dropdown for the bottom rows is being hidden by the parent container. I have a demonstration on Stackblitz.

[JolandaNava]

Same issue with dropdown in every row of a table, also using version 0.7.2 but within an Elm web app.

[PhilAnderson1]

I have the same issue using a drop-down inside a "media-content" div on Bulma 0.7.4

Note: the problem only manifests below the $tablet breakpoint, viewing the site on a resolution above that breakpoint, the drop-down overlays all other content as required.

I've tried increasing $dropdown-content-z and reducing the z-index of the surrounding content, and it doesn't seem to have any effect.

Edit: i just re-coded the Bulma "media" object as a CSS grid, that works fine, so it seems to be a property of the media or media-content class that's causing the problem for me.

[bmilleare]

I was also seeing this issue on the bottom row(s) of a table (using DataTables) where every row has a dropdown element. Bulma 0.7.5.

The issue is caused because the container uses overflow:auto which is why z-index has no effect regardless of the using a super high value.

I've opted to trigger a scroll event on the table container when the .dropdown-trigger is clicked, which seems to be the most elegant solution. jQuery example below (the margin-bottom is so the bottom border is fully visible):

$('.dropdown-trigger a').on('click', function(){
    let menu = $(this).closest('.dropdown').find('.dropdown-menu');
    menu.css({'margin-bottom':'3px'});
    $(this).closest(".table-container").stop().animate({ scrollTop: (menu.offset().top +  menu.outerHeight())}, 500);
});

[ghiscoding]

For reference and if that can help in troubleshooting the issue, the Navbar doc has the issue as shown below

[levex]

This bug has existed for quite some time. Can something be done to fix this? This is a major blocker for my usecase...

It appears to easily happen when inside a scrolling context, i.e. the last row of a table inside a table-container. If I remove the table-container surrounding the <table> then it works fine.

[simon-tarr]

This is still occurring for me. Presumably no one has been able to figure out what's causing this?

[nauranand]

I set a lower z-index to the overlapping elements to fix.

    z-index: 1;

@aysark solution fixed it for me.

[03juan]

In terms of the dropdown clipping within .table-content this seems to be a known issue from how the CSS spec and browsers treat overflow setting combinations.

It's quite well explained in CSS Tricks but the workaround they suggest involves 2 separate wrappers modifying the various position attributes to float the dropdown in CSS, and then applying top and left values in JS.

[SharkFourSix]

Same issue with dropdown in every row of a table, also using version 0.7.2 but within an Elm web app.

Any fix on this? It's obvious this is a bug that needs to be addressed.

[akshitrcrm]

Same here. I'm trying to use a dropdown in a modal. The dropdown opens up behind/under the modal. When I investigated, the modal is set z-index of 801 by default. and the dropdown they set z-index 99 for some reason. I can't seem to override the z-index property of the dropdown as it's added on the fly. I tried adding this

.dropdown-menu {
    z-index: 802;
}

but this is overriden by the z-index added by bulma

[Bouchtaoui]

Same here and I don't have a solution for now. It's too bad, because I choose Bulma because it's really opensource with no hidden tricks to seduce us to buy a premium package kind of stuff. It's 2023 and still not addressed this issue...

[sam-adam]

Also happened to me, since the dropdown-menu is a part of the overall table, the table's container got stretched to contain the dropdown-menu, I guess this can't be help since Bulma is a pure CSS library?

I think to achieve this the dropdown menu should be appended to the body, which requires Javascript.

I manage to achieve this by using Buefy's Dropdown with append-to-body prop set to true.

Bear in mind that the appending to body happened on BDropDown mounted event, this means after the dropdown-menu is visible near it's trigger, it's position won't be updated if the trigger's position changed (by scrolling, etc).

[tjwalch]

In Bulma 1.0.1 I encountered this bug when my dropdown was in in a .fixed-grid - the dropdown content would render below any following elements with position: relative, like a .container. The best workaround i found was to add:

.fixed-grid {
    position: relative;
    z-index: 1;
}

Another way is to give all those following relative positioned elements position: static, but that I found to be a lot less flexible.