What happened to my dropdown navigation?

Design help General
1

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)

2

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!

3

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!

image
image1920×948 177 KB

image
image1920×893 168 KB

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!

2 Likes
4

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!