How to Create a Split Navigation with Your Logo Centered in GeneratePress

If you’re using GeneratePress and want to achieve a navigation layout where your logo is centered and the menu items are split on the left and right, you may have noticed that there’s no built-in option to do this. However, with some CSS and a few small tweaks, you can easily accomplish this.

Step 1: Set Up Your Navigation Layout

1. Go to Appearance > Customize > Layout > Primary Navigation.
2. Set the “Navigation Location” to either “Float Left” or “Float Right”.
   • This step is essential for the CSS trick to work.
3. Save your changes.

Step 2: Add the CSS to Split Your Navigation

Next, we need to add the necessary CSS to the site.

1. Go to Appearance > Customize > Additional CSS.
2. Copy and paste the following CSS from the GeneratePress documentation:cssCopyEdit@media (min-width: 769px) { .main-navigation ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .main-navigation ul li:nth-child(3) { margin-left: auto; } }
3. Adjust the nth-child selector:
   • The nth-child value determines which menu item starts the right side of the split navigation.
   • If your menu structure has more items on the left, increase this number.
   • In this example, we change nth-child(3) to nth-child(4) to balance the left and right side correctly.
4. Save your changes and check the result.

Step 3: Adjust for Responsive Views

By default, the split navigation does not work well on tablet sizes. To fix this:

1. Go to Appearance > Customize > Layout > Primary Navigation.
2. Change the “Mobile Menu Breakpoint” from 768px to 800px.
3. Save your changes.
4. Test the navigation at different screen sizes to ensure it collapses correctly into the mobile menu.

Step 4: Adding Social Icons in the Menu (Optional)

If you have social icons in your navigation, you might be using GeneratePress Elements with a hook inside the menu bar items.

• Go to Appearance > Elements.
• Open the Block Element where you added your social icons.
• If needed, adjust the positioning and visibility to ensure they display correctly.

Final Thoughts

This method allows you to create a clean and functional split navigation with a centered logo in GeneratePress. However, keep in mind:

• This works best with six or fewer menu items.
• If you add too many, the navigation becomes cluttered and affects usability.
• Always test on different screen sizes to ensure a seamless experience.

With just a small CSS tweak and some adjustments in the GeneratePress Customizer, you can create a professional-looking centered navigation that works smoothly on desktop and mobile.

Make sure to check your responsive breakpoints and adjust them as needed!