如何使用 GeneratePress 实现网站 Logo 居中，两侧菜单项均衡分布

在现代网站设计中，导航栏的布局对整体视觉效果和用户操作体验有着重要影响。GeneratePress 主题提供了灵活且强大的功能，帮助用户实现 Logo 居中，两侧菜单项均衡分布的高质量导航栏。本文将详细介绍实现这一效果的具体步骤，帮助你轻松打造简洁大气的导航设计。

一、基础设置

• 进入主题自定义器（Customizer）→ 一般设置（General）
• 确认当前使用的是主题的 Flexbox 版本

二、导航位置选择

为保证布局生效，导航位置需设置为：

• Navigation as Header 选项，或

• 左右浮动的导航位置（Float Left 和 Float Right）

后续会对两种方案做对比讲解。

三、添加自定义 CSS 代码

• 回到自定义器，找到“附加 CSS”栏，添加以下代码

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

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

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

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

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

• 修改代码中用于控制右侧菜单项起始位置的数字，例如想要左侧三项，右侧三项，则数字设为4

• 如果菜单项数量为奇数，需调整此数字以达到最佳平衡效果

四、默认头部与导航作为头部的区别

• 默认头部布局允许用户分别控制菜单项和 Logo 的高度，这提供了更灵活的调整空间。

• 启用“Navigation as Header”选项后，菜单项高度和 Logo 大小会统一由菜单项高度控制，整体显得更加协调。

• 菜单栏和头部背景色可分别设定，形成明显的层次感。

五、效果展示及优化

• 启用“Navigation as Header”后，菜单项上下不会留下多余空白，且背景色能够覆盖整条导航栏，视觉更为统一。
• 菜单项高度与 Logo 大小协调一致，页面导航整体更加简洁和现代。

六、总结

通过 GeneratePress 的“Navigation as Header”功能，结合适当的自定义 CSS，能够快速实现 Logo 居中、两侧菜单均衡分布的导航栏布局。该方法适合追求简洁、专业网站设计的用户，提升网站整体的用户体验和美观度。

最近更新

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息