Drop-downs and nav-bar z-index issue

General
1

Hi, I can’t figure out why I’m having this issue with the form drop-down overlapping my nav-bar. I have the z-index of the nav way higher than the drop-downs.

Screen Shot 2023-07-25 at 12.49.43 PM
Screen Shot 2023-07-25 at 12.49.43 PM1920×1200 175 KB

Here is the read-only link to my webflow project Webflow - Schlegel GreenHouse 2

2

Hey @jakeschlegel86 I asked Chat GPT for help on this as it seems to be a styling issue and here are some recommendations it has given me:

  1. Positioning: Make sure that both the nav-bar and the drop-downs have proper positioning. The nav-bar should have a positioning property like position: relative or position: fixed, and the drop-downs should have position: absolute or position: fixed. This will ensure that the z-index property works as expected.
  2. Parent elements: Check if there are any parent elements of the nav-bar and drop-downs that might have a lower z-index. If any of the parent elements have a lower z-index, it can affect the stacking order of the child elements (i.e., nav-bar and drop-downs).
  3. Container’s z-index: Verify that the containers of both the nav-bar and the drop-downs do not have a z-index that is causing the issue. Even if the individual elements have correct z-index values, the container’s z-index can still affect the stacking order.
  4. CSS Transitions: If you’re using CSS transitions or animations, they might affect the stacking context. Transitions can sometimes cause stacking issues, so consider checking if removing them temporarily solves the problem.
  5. Overlapping elements: Ensure there are no other elements on the page that are unintentionally overlapping the nav-bar or the drop-downs. Overlapping elements can disrupt the stacking order.
1 Like
3

I’ve checked all of these I believe and still no luck. thanks, though.