Back to Community
Home / Community / Core → Alpha/beta/rc

Fixing Z-Index Issues with the Twenty Seventeen Drop-Down Menu

34 threads Sep 7, 2025 Core → Alpha/beta/rc

Content

If you've noticed your Twenty Seventeen theme's drop-down menu appearing behind page content when scrolling, you're not alone. This is a common issue caused by the way CSS stacking contexts work. This guide will explain why it happens and show you how to fix it with a simple CSS adjustment.

Understanding the Problem

The Twenty Seventeen theme uses z-index to ensure the menu overlaps page contents when scrolled. However, the main .site-content-contain block doesn't have a defined stacking context. When no stacking context is established, other positioned elements on the page with a z-index can potentially appear in front of the menu, breaking the intended design.

The Solution: Add a Z-Index

The most effective fix is to add a small piece of CSS to establish a new stacking context. This ensures the menu remains on top of other content as intended.

  1. Navigate to your WordPress dashboard.
  2. Go to Appearance > Customize.
  3. Click on Additional CSS.
  4. Paste the following CSS code into the text area: 
    .site-content-contain {
    z-index: 1;
    position: relative;
}
  5. Click Publish to save your changes.

This code assigns a z-index to the .site-content-contain element and ensures it is positioned, which creates a new stacking context. The menu, which has a higher z-index value, will now correctly appear on top of this container when scrolling.

Why This Works

By setting z-index: 1 and position: relative on the content container, you create a new local stacking context. The menu's z-index is now compared to other elements within this same context, allowing its higher value to take precedence and display correctly on top.

Alternative Method: Using a Child Theme

For a more permanent solution that won't be lost during theme updates, consider adding this CSS to a child theme's style.css file. This is a recommended best practice for any theme modifications.

By implementing this simple fix, you can ensure your Twenty Seventeen menu functions flawlessly and maintains a professional appearance on your site.

Related Support Threads Support