Bulma: 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.