Plotly Dash Boostrap drop down menu is rendered behind the the plotly graph objects. Is there a way

I'm making a plotly - dash app that has a navigation side bar to browse through the different app pages (see code below). One of the navigation items contains a dbc.DropDownMenu that hangs over the edge of the navigation side bar into the main content area.

Most of the the time this isn't an issue, except when there are plotly graphs in the main content area. When there are graphs, the drop down menu is rendered below the graphs (see pictures). Is it possible to change the render order always have the drop down shown on top?

# styling the sidebar SideBar_Style = { "position": "fixed", "top": 0, "left": 0, "bottom": 0, "width": "18rem", "padding": "2rem 1rem", "background-color": "#f8f9fa", } # padding for the page content Content_Style = { "margin-left": "18rem", "margin-right": "2rem", "padding": "2rem 1rem", } sidebar = html.Div( [ html.H2("Navigation", className="display-4"), html.Hr(), html.P( "Select a page", className="lead" ), dbc.Nav( [dbc.NavLink("Home", href="/", active="exact"), dbc.NavLink("Timeseries", href="/pages/timeseries", active="exact"), dbc.NavItem( dbc.Row([ dbc.Col(dbc.NavLink("Wind Roses", href="/pages/windrose", active="exact"), width=10), dbc.Col(dbc.DropdownMenu([dbc.DropdownMenuItem("Comparison", href="/pages/windrosecomparison", active="exact"), dbc.DropdownMenuItem("Item 2")], nav=True), width=2)], className="g-0") ), dbc.NavLink("Monthly Wind Speeds", href="/pages/monthwindspeeds", active="exact"), dbc.NavLink("Recovery", href="/pages/recovery", active="exact"), dbc.NavLink("Wind Shear", href="/pages/windshear", active="exact"), dbc.NavLink("Diurnal", href="/pages/diurnal", active="exact"), dbc.NavLink("Campaign Map", href="/pages/campaignmap", active="exact"), dbc.NavLink("TestPage", href="/pages/testpage", active="exact"), ], vertical=True, pills=True, ), ], style=SideBar_Style, ) content = html.Div(id="page-content", children=[], style=Content_Style) app.layout = html.Div([ dcc.Location(id='url', refresh=False), sidebar, content ]) 

Drop down menu without any graphs in the main content div

Drop down menu when the main content div has plotly graphs in it

1

1 Answer

As suggested by Daniel Al Mouiee, changing the Z-Index of the graphs parent container fixed the issue

enter image description here

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobmpuYWiFeoGOqaOorJyueqWt0qFkm6efqMGzrc9mm6unoGKxsMPNZqSepqVitrR50Z6lnZ2imrFursShoKecXam1pnnToZxmqJykwa3FjKCpmqiYYryjtsQ%3D