How to use GeneratePress to center the logo and balance the menu items on both sides of the site.

In modern website design, the layout of the navigation bar has an important impact on the overall visual effect and user experience.GeneratePress The theme provides flexible and powerful features that help users to realize the logo Centered, high quality with balanced distribution of menu items on both sidesnavigatorcolumns. This article will detail the specific steps to achieve this effect, to help you easily create a simple atmospheric navigation design.

I. Basic setup

• Go to Theme Customizer → General Settings
• Make sure you are using the Flexbox version of the theme.

II. Navigation position selection

For the layout to take effect, the navigation position needs to be set:

• Navigation as Header option, or

• Left and Right Float Navigation Positions (Float Left and Float Right)

A comparison of the two programs will be explained later.

Add custom CSS code

• Go back to the customizer and find "Attachments CSS" column, add the following code

@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding, .
    .inside-header>.site-logo, .site-branding-container, .
    .site-branding-container, .
    #site-navigation .navigation-branding .site-logo, .
    #sticky-navigation .navigation-branding {
        position: absolute; left: 50%; #sticky-navigation .navigation-branding {
        navigation-branding { position: absolute; left: 50%;
        transform: translateX(-50%); z-index: 1000; z-index: 1,000; z-index: 1,000
        z-index: 1000; }
    }

    #site-navigation {
        margin-left: unset !important; } #site-navigation { margin-left: unset !important; display: flex; }
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset; }
    }

    #site-navigation, .
    #primary-menu, .main-navigation .
    .main-navigation .inside-navigation {
        flex: 1; }
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(3) {
        margin-left: auto; }
    }
}

• Modify the code used to control the right side of themenuThe number at the start of the item, for example, if you want three items on the left and three on the right, set the number to 4

• If there is an odd number of menu items, adjust this number for optimal balance.

IV. Default header vs. navigation as header

• The default header layout allows the user to control the height of menu items and logos separately, which provides more flexibility.

• After enabling the "Navigation as Header" option, the menu item height and logo size will be unified by the menu item height control, and the overall appearance is more coordinated.

• Menu bar and header background colors can be set separately to create a distinct hierarchy.

V. Effect display and optimization

• When "Navigation as Header" is enabled, there is no extra space above and below the menu items, and the background color can cover the whole navigation bar, which makes it more visually uniform.
• The height of the menu items is harmonized with the size of the logo, and the overall page navigation is cleaner and more modern.

VI. Summary

pass (a bill or inspection etc) GeneratePress Navigation as Header" function, combined with appropriate customization of the CSSThe logo is centered in the center and the menus on both sides are balanced.navigation barLayout. This method is suitable for users seeking a clean, professional website design that enhances the overall user experience and aesthetics of the website.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off