Back to Community
Home / Community / Theme → Twenty fourteen

How to Fix Twenty Fourteen Menu Issues: Z-Index, Styling, and Responsive Problems

17 threads Sep 10, 2025 Theme → Twenty fourteen

Content

The Twenty Fourteen theme is a popular and versatile WordPress theme, but users often encounter challenges with its navigation menus. Based on common community support threads, the most frequent issues involve sub-menus disappearing behind content, difficulties with menu styling, and problems with the theme's responsive behavior on different screen sizes.

Common Twenty Fourteen Menu Problems and Solutions

1. Sub-Menu Items Disappearing Behind Content (Z-Index Issue)

The Problem: Dropdown sub-menus appear behind featured images, headers, or other page elements instead of in front of them.

The Cause: This is typically a z-index stacking context issue in CSS. The stacking order of the menu is lower than that of other elements on the page.

The Solution: Add the following CSS to a child theme's style.css file or via a custom CSS plugin to bring the menu to the forefront:

.primary-navigation ul ul {
    z-index: 999999;
}

2. Creating Non-Clickable Parent Menu Items

The Problem: A user wants a parent menu item to be a text label only, not a clickable link to a page or post.

The Solution: Use the WordPress menu builder to add a Custom Link.

  1. Go to Appearance → Menus.
  2. In the Custom Links section, enter a # in the URL field.
  3. Enter the desired text for your non-clickable label in the Link Text field.
  4. Add this item to your menu and place your actual page links beneath it as sub-items.

3. Changing Menu Font Size, Family, and Color

The Problem: The default menu font is too small, the wrong family, or needs a color change.

Important: Always make these changes in a child theme or using a custom CSS plugin to prevent them from being overwritten during a theme update.

Solutions: Use the following CSS examples, adjusting the values to your liking.

/* For the top primary menu */
.primary-navigation a {
    font-size: 15px; /* Adjust size */
    font-weight: bold; /* Make it bold */
    font-family: Times; /* Change font family */
    color: #333; /* Change link color */
}

/* For the left sidebar secondary menu */
.secondary-navigation a {
    font-size: 15px;
    font-family: Times;
    color: #333;
}

4. Adjusting Mobile Menu and Responsive Behavior

The Problem: A variety of issues can occur on mobile views or specific screen widths, including the mobile menu toggle appearing at the wrong breakpoint, unwanted space, or cut-off icons.

Solutions:

  • Increase Mobile Menu Item Height: If icons are cut off in the mobile menu, increase the line height or padding. 
    @media screen and (max-width: 859px) {
        .primary-navigation .menu-item a {
            padding-top: 20px; /* Adjust value as needed */
            padding-bottom: 20px; /* Adjust value as needed */
        }
    }
  • Adjust Responsive Breakpoint: Changing the screen width at which the mobile menu appears is complex, as it involves modifying the theme's JavaScript (function.js) and CSS media queries. This requires advanced coding knowledge.
  • Remove Space on Mobile: To reduce space between a featured image and the menu bar on mobile, use a media query. 
    @media only screen and (max-width: 479px) {
        .content-area {
            padding-top: 10px; /* Adjust this value */
        }
    }

5. Reducing Sub-Menu Height and Padding

The Problem: Long sub-menus get cut off on some screens because their total height exceeds the viewport.

The Solution: Reduce the padding or line-height of individual sub-menu items to fit more links in a smaller space.

.primary-navigation ul ul a {
    padding-top: 5px;   /* Reduce top padding */
    padding-bottom: 5px; /* Reduce bottom padding */
    line-height: 1.2;    /* Reduce line height */
}

General Best Practices

  • Use a Child Theme: Never modify the core Twenty Fourteen theme files directly. Use a child theme to ensure your customizations are safe from updates.
  • Use a CSS Plugin: If you are not comfortable with a child theme, a plugin like "Simple Custom CSS" or "Custom CSS Manager" is a good alternative for adding these code snippets.
  • Test Responsively: After making any menu changes, always test your site at different browser widths to ensure it looks correct on desktop, tablet, and mobile views.

By understanding these common issues and their solutions, you can effectively customize the Twenty Fourteen theme's navigation to better suit your website's needs.

Related Support Threads Support