Back to Community
Home / Community / Theme → Onepress

How to Center and Customize Your OnePress Theme Header Menu

38 threads Sep 9, 2025 Theme → Onepress

Content

Customizing the header menu is one of the most common tasks for OnePress theme users. Many site builders want to center their logo, align their navigation, or create a unique layout like a logo placed between menu items. This guide compiles the most effective solutions from the community to help you achieve your desired header design.

Why is the OnePress Menu Aligned to the Right by Default?

The OnePress theme uses a traditional header structure where the logo or site title is floated to the left and the primary navigation menu is floated to the right. This is a common web design pattern. The theme's built-in customizer options offer some control, but for more advanced layouts, custom CSS is often required to override these default styles.

Common Solutions for Centering the Menu and Logo

1. Centering the Entire Menu

If your goal is to center the navigation menu horizontally, you can use the following CSS code. Add this to Appearance > Customize > Additional CSS.

.onepress-menu {
    float: none !important;
    display: table;
    margin: 0 auto;
}

2. Centering the Logo Above the Menu

To center your logo on its own line above a centered menu, use this combination of CSS rules.

.site-branding {
    width: 100%;
    text-align: center;
    float: none;
}

.onepress-menu {
    float: none;
    display: table;
    margin: 0 auto;
}

3. Creating a Logo-in-Menu Layout (Advanced)

A frequently requested layout places the logo in the center of the menu, with navigation items on both sides. This requires a more complex CSS approach to rearrange the header elements. The following code is a common starting point suggested by community members.

.site-branding {
    float: right !important;
}

.onepress-menu {
    float: left;
    margin-right: 40px;
}

@media screen and (max-width: 1140px) {
    .site-branding {
        float: left !important;
    }
    .onepress-menu {
        margin-right: 0px;
    }
}

Note: Achieving a perfect logo-in-menu layout often requires significant additional customization and testing across different screen sizes. It may not be achievable with CSS alone and could require modifying theme template files.

Troubleshooting Common Issues

  • Extra Space Around the Menu: After centering, you might notice unwanted space. This can often be adjusted by modifying the margin and padding properties on the .onepress-menu or .main-navigation elements using your browser's inspector tool.
  • Mobile Responsiveness: Always test your changes on mobile devices. Use @media queries (as shown in the advanced example above) to ensure your centered menu looks good on all screen sizes. For mobile-specific centering, you might need to target the header wrapper: 
    @media only screen and (max-width: 640px) {
    .header-right-wrapper {
        float: none;
        display: table;
        margin: 0 auto;
    }
}
  • Submenu Positioning: If you have centered your menu and find that dropdown submenus are misaligned, check the theme customizer for an option labeled "Center vertical align for menu" and ensure it is unchecked, as this can sometimes interfere with submenu placement.

What Isn't Possible with Standard Customization

Based on community threads, the following header modifications are not supported by the theme's default options and would require creating a child theme and editing PHP template files (like header.php):

  • Adding a full-width banner above the logo and menu.
  • Adding custom HTML content (e.g., a phone number) to the right side of the menu bar.
  • Completely separating the logo and menu into distinct rows without extensive code changes.

For these complex structural changes, it is recommended to seek assistance from a developer familiar with WordPress theme structure.

Conclusion

Centering your OnePress header menu is a straightforward process using the CSS snippets provided. Start with the basic centering code and test your site after each change. For more ambitious layouts, be prepared to experiment with different CSS properties and media queries to achieve a responsive and visually pleasing result.

Related Support Threads Support