Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Navigation bar dropdown menu and plotly toolbar

I have a navigation bar with a dropdown menu item. When I mouse-hover it, 3 links from the menu displays but I am unable to click on them because it disappears when I move the mouse over it. The cause is the plotly toolbar getting the “priority” over the submenu items.

Is there a workaround for this problem ?

Here is the jsfiddle :
https://jsfiddle.net/nukdpk8L/1/

Oh that’s unfortunate. That’s because the modebar is drawn with a (very) high z-index of 1001

So, setting the z-index of the your dropdown items to a value greater than 1001 should do the trick.

Thank you very much, I have tried with a high value of z-index but not over 100 :slight_smile: With a value of 1002, it works perfectly.

By the way, I did not know about SCSS format (modebar format file), interesting.

I’m glad that work for you. We should do a better job of documenting or making that modebar z-index configurable. Thanks for bringing this up!