BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty nineteen

How to Fix Common Twenty Nineteen Theme Menu and Header Layout Issues

29 threads Sep 16, 2025 Theme → Twenty nineteen

Content

Many users of the Twenty Nineteen theme encounter challenges when trying to customize their site's navigation menu and header layout. These issues range from menus not aligning correctly to unwanted spacing and problematic dropdown behavior. This guide compiles the most common problems and their solutions, based on community discussions.

Common Problems and Solutions

1. Centering the Main Navigation Menu

A frequent request is to center the main navigation menu horizontally. By default, the menu might be left-aligned. To center it, add the following CSS code in the Appearance → Customize → Additional CSS section:

.main-navigation {
    text-align: center;
}

If this doesn't work immediately, ensure you do not have other plugins or theme conflicts that might be preventing the CSS from taking effect.

2. Reducing Excess Space Below the Menu

Many users find the gap between the menu bar and the page content to be too large. To reduce this padding, use the following CSS snippet in the Additional CSS area. You can adjust the pixel value to your preference.

#main {
    padding-top: 20px;
}

3. Increasing Logo Size

Resizing the logo is a common customization. To make it larger without causing layout issues, target the logo image directly. The following code provides a starting point; you may need to adjust values for different screen sizes.

.site-logo .custom-logo {
    max-width: 300px; /* Adjust this value */
    height: auto;
}

Be aware that a significantly larger logo may require additional adjustments to the header's layout on mobile devices.

4. Fixing Dropdown Menus That Are Cut Off

On pages with a featured image header, dropdown submenus can sometimes be cut off at the bottom of the image. This is often a z-index issue, where the page content sits above the menu. To bring the menu to the front, try:

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

If the submenu is being cut off by a container with the CSS property overflow: hidden, adjusting the z-index may not be sufficient, and you might need to modify the container's properties.

5. Adjusting Overall Header Height

To make the combined header and navigation bar shorter, you can reduce the padding and margins. The following CSS targets the header on larger screens:

@media only screen and (min-width: 768px) {
    .site-header {
        margin: 0;
        padding: .8rem 0;
    }
}

Important Notes

  • Use a Child Theme: For any modifications beyond CSS, such as editing template files, always use a child theme. This prevents your changes from being overwritten when the theme updates.
  • CSS Specificity: If your CSS changes aren't working, the theme's existing styles might be overriding them. Use your browser's inspector tool to identify the exact CSS classes and use more specific selectors or add !important as a last resort.
  • Test Responsiveness: Always check how your changes look on mobile, tablet, and desktop views. Use CSS media queries to apply different styles for different screen sizes.

These solutions address the most frequently reported layout issues within the Twenty Nineteen theme. For more complex customizations, consulting the official WordPress documentation or theme handbook is recommended.

Related Support Threads Support