Submenu items displaying past the menu container appear behind the main content

When the submenu list goes over the menu container they appear under rather than over the main content of the webpage. I believe this is a positioning issue with the menu but I don’t know how to bring it forward. What component of the website should I configure? See problem and website structure below.

Submenu looks correct when published but submenus that appear below menu container aren’t selectable. View on line at test.bailin.works

I discovered that the subpages list do show over those pages that have a banner image in the global header. However, any listing that fall beyond the banner will not be selected. I still need to know how to push the submenus OVER the rest of the page.

Try setting the z-index of the menu component to >=31. If that still doesn’t work, AND the menu component is within another component, set that component’s z-index to >=31.

I tried adjusting the Z-index. No joy. But I removed the top margin setting of 20 in the Section Heading component below it and added that same 20 setting to the bottom margin of the menu global and that worked. I am still curious, however, how the menu configuration should have that issue to begin with.

This is very frustrating. I am using a dropdown to show a map in the content area but the map appears below grid elements. I have asked before about a submenu and only solved it by reducing the submenus NOT solving bringing the submenus forward. SO now I need to have the map appear in front. How do I solve this?

Hey @DWB
I have this cases also from time to time. Sometimes setting the z-index as suggested by @sbchasin helps. Unfortunately not always.

You also can try to play with the „relative“ setting. When a dropdown is showing behind the below picture, then „relative“ often helps.

The best would be, you share a link to your project, so we can have a close look.

I used a Flex element with position set to ‘relative’ and Z-index set to custom -1 and the map was placed in front as it should. The Dropdown was set to top. That worked. However, when the dropdown was set to bottom it did not. I’d prefer it to dropdown from the bottom over but this will do. I will share the project and maybe you and others can figure out how to set it up. Thank you.

Except now when the map is put into a container/flex element the map has no operational features: zoom, street view, etc. I reverted back to just showing the map without dropdown