Back to Community
Home / Community / Theme → Twenty sixteen

How to Center the Navigation Menu in Twenty Sixteen Theme

43 threads Sep 16, 2025 Theme → Twenty sixteen

Content

A common challenge for users of the Twenty Sixteen theme is centering the primary navigation menu. The theme's default layout aligns the menu to the right, which may not suit every website's design. Based on numerous community discussions, this guide will explain why this happens and provide the most effective solutions.

Why is the Menu Not Centered by Default?

The Twenty Sixteen theme uses a flexbox layout for its header elements. This modern CSS technique is great for responsive design but can make traditional centering methods, like text-align: center, ineffective. The menu's alignment is controlled by the flex container properties in the .site-header-main class.

Most Effective Solution: Using CSS Media Queries

The most widely reported and successful method for centering the menu involves overriding the flex properties and applying auto margins. This solution should be added to your site's Additional CSS section (Appearance > Customize > Additional CSS) or to your child theme's stylesheet.

@media screen and (min-width: 44.375em) {
    .site-header-main .site-branding {
        margin: 0;
    }
    .site-header-menu {
        margin: 0 auto;
    }
    .primary-menu {
        justify-content: center;
    }
}

How it works:

  • @media screen and (min-width: 44.375em): This targets only desktop-sized screens, preventing issues with the mobile menu.
  • .site-header-main .site-branding { margin: 0; }: Removes the default margin from the site branding (title/logo).
  • .site-header-menu { margin: 0 auto; }: Centers the menu container itself.
  • .primary-menu { justify-content: center; }: Centers the menu items within the container.

Alternative Method: Adjusting Flex Properties

If the above code doesn't achieve the desired result, another approach is to modify the flex properties directly. Some users found success by removing the display: -webkit-flex; declaration.

@media screen and (min-width: 44.375em) {
    .site-header-main {
        display: block; /* Changes from flex to block */
    }
    .site-header-menu {
        margin: 0 auto;
        text-align: center;
    }
    .main-navigation li {
        display: inline-block; /* Changes list items to inline-block */
        float: none;
    }
}

Important Considerations

  • Child Theme: Always use a child theme when making modifications. This prevents your changes from being overwritten during theme updates.
  • Browser Testing: After applying any CSS, test your site on different browsers and devices to ensure the menu behaves correctly, especially when switching to the mobile "hamburger" view.
  • Specificity: If other CSS rules are conflicting, you may need to use more specific selectors or the !important rule (use sparingly).

These solutions, compiled from successful community reports, provide a reliable starting point for centering your Twenty Sixteen navigation menu. If one method doesn't work perfectly for your specific setup, try adjusting the values or combining approaches.

Related Support Threads Support