What happened to my dropdown navigation?

Hello, I’m experiencing an unexpected and undesired issue with my site’s navbar since making a few changes. You can see the menu is working correctly on this published web page: Paintings by Brianna Gardocki

However, the preview mode of my project (shared below) now has the nav menu’s dropdown content flowing underneath the image and text content. I thought it might be a z-index thing (it isn’t) and I’m wondering why this is happening, at what point during my edits did I break the navigation, and if there are any possible fixes for this!

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

Hi again @PixelGeek @Waldo @webdev @RoryVB – bumping this post to see if I might be able to get some assistance? I’ve set the Z-index of every single element in my navbar to 999 and have made sure that overflow is set to visible for each element also. Plz help!

Hi Morgan!

Sometimes you need to give one element a high z-index but another a lower one as well for it to work!

Give the first section z-index: 2 and the second one z-index: 1. Like so!

I’m not exactly sure how the auto value of the z-index works. Since the hierarchy of DOM elements don’t always give priority to the higher one in the doc.

Hope this helps!


This makes complete sense and fixed the issue, thank you! As it turns out I only had to “zoom out” one more level to arrive at this solution, I was focusing only on the nav. Take care!