在现代网站设计中，导航栏的布局对整体视觉效果和用户操作体验有着重要影响。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 居中、两侧菜单均衡分布的导航栏布局。该方法适合追求简洁、专业网站设计的用户，提升网站整体的用户体验和美观度。