WordPress 导航栏设置：结构、样式与移动端
导航栏的问题很少出在「能不能做出来」，而是三处判断：一级项放几个、导航栏多高、手机上怎么收。这三个数定错了，样式做得再精致也难用。这篇给的是可直接套用的数值和代码，而不是「根据品牌调性调整」这类空话。
先定结构：一级几个、每个下拉几项
导航栏是页面上点击密度最高的区域，条目数量直接决定可用性。经验值：
- 一级 5 到 7 个。少于 4 个显得站点内容单薄，多于 8 个在 1440 宽度下会挤成两行或被迫缩小字号，点击热区低于 40 像素就开始误点。
- 每个下拉 3 到 7 项。只有 1 项的下拉没必要做下拉，直接提为一级；超过 8 项的下拉用户扫读困难，应该拆成两组或改成 Mega Menu。
- 总层级不超过 2 层。三级下拉在鼠标斜向移动时极易收起，触屏设备更无从操作。
结构排序也有讲究：把「产品/服务」放第一位，「关于」放最后，「首页」是否单独设一项取决于 logo 是否可点。logo 可点回首页是用户默认预期，如果 logo 已经链接首页，导航里再放「首页」就多占了一个位置，可以省掉。
对照一下不同规模的合理配置：
| 站点类型 | 一级项 | 下拉平均项数 | 建议结构 |
|---|---|---|---|
| 企业官网（5-15 页） | 5 | 4 | 产品、案例、服务、关于、联系 |
| 内容站 / 博客 | 6 | 6 | 分类目录直接做一级，不做下拉 |
| 电商（WooCommerce） | 6 | 8 以上 | 按品类做 Mega Menu，不用普通下拉 |
| 多语言站 | 5 + 语言切换 | 4 | 语言切换独立成右上角小控件，不占主项 |
导航栏高度与 logo 尺寸
这两个数值要一起定，因为 logo 高度受导航高度约束。
| 导航栏高度 | logo 最大高度 | 适用 |
|---|---|---|
| 64px | 36px | 紧凑型，适合内容站，滚动时不占屏 |
| 80px | 48px | 通用企业站，最常见的选择 |
| 96px | 60px | 品牌型，首页顶部大图搭配 |
| 120px 以上 | 80px | 仅首屏一屏展示，滚动后必须收缩 |
规则是 logo 高度不超过导航高度的 60%，上下留白各 20%，视觉上才不会顶格。上传时按 2 倍图准备，也就是导航 80px 高、logo 显示 48px，就上传 96px 高的 PNG，Retina 屏上才不发虚。
常用尺寸还有一个坑：很多主题的 logo 容器写死了高度，上传宽图会被裁成方形。检查 CSS 里 .custom-logo 的 max-height，如果被固定成 height: 100px，改成 max-height 并加 width: auto：
.custom-logo {
max-height: 48px;
width: auto;
height: auto;
}导航栏高度本身建议用 CSS 变量统一控制，改一处全站生效，比在每个选择器里改数字可靠：
:root {
--nav-h: 80px;
}
.site-header .main-navigation {
height: var(--nav-h);
display: flex;
align-items: center;
}移动端汉堡菜单：核心已给结构，样式要自己写
WordPress 核心不提供汉堡按钮，但主题一般会输出一个 .menu-toggle 按钮。判断主题支不支持，看两处：前台源码里有没有 menu-toggle 这个类；CSS 里有没有 @media (max-width: 768px) 下隐藏主菜单的规则。
如果主题没有，自己加最小实现。HTML 放在导航容器里：
<button class="nav-toggle" aria-expanded="false" aria-controls="site-nav">
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
</button>CSS 控制显隐：
.nav-toggle { display: none; }
@media (max-width: 768px) {
.nav-toggle { display: block; }
.main-navigation ul {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
}
.main-navigation.is-open ul { display: block; }
.main-navigation.is-open .sub-menu { display: block; }
}JS 只做一件事，切换类名并同步 aria 状态：
document.querySelector('.nav-toggle').addEventListener('click', function () {
var nav = document.querySelector('.main-navigation');
var open = nav.classList.toggle('is-open');
this.setAttribute('aria-expanded', open ? 'true' : 'false');
});移动端最容易漏的三点：下拉子菜单在手机上默认是隐藏的，必须让 .sub-menu 在展开状态下也 display:block，或者改成手风琴；点击热区要够大，每个菜单项高度不低于 44px；展开后要能锁滚动，否则手指滑到菜单底部会连带滚动页面。
还有一种做法是纯 CSS 用 checkbox hack，不依赖 JS。省事但焦点管理和无障碍支持差，能用 JS 就别偷懒。
粘性导航与透明导航
「滚动时固定在顶部」用 position: sticky 一行就够，前提是父元素没有 overflow: hidden，否则 sticky 会失效——这是排查时第一个要看的地方。
.site-header {
position: sticky;
top: 0;
z-index: 999;
background: #fff;
transition: height .2s;
}
.site-header.is-scrolled { height: 64px; }透明导航（首屏透明、滚动后变白）只在有大幅 banner 的首页成立，内页必须一开始就是实色，否则白底内容压在白字导航下面完全看不清。实现上用 body.home .site-header 限定，不要全站套用。
粘性导航会带来一个副作用：锚点跳转时目标标题被导航栏挡住。补一行 scroll-margin-top 就解决，值等于导航高度加 20px：
h2[id], h3[id] { scroll-margin-top: 100px; }面包屑：装插件还是写代码
面包屑不是导航栏的一部分，但经常被放在导航下方，这里一并说清。判断标准很简单：
| 需求 | 建议 | 代价 |
|---|---|---|
| 只要「首页 > 分类 > 文章」的文本链 | 主题自带就够，没有就写 20 行代码 | 低，可控 |
| 要同时输出结构化数据（BreadcrumbList） | Yoast / Rank Math 已自带，直接开 | 零，装了 SEO 插件就不用再装别的 |
| WooCommerce 商品页要完整分类路径 | 用 SEO 插件的面包屑，别用通用面包屑插件 | 低，但要注意和主题样式统一 |
| 多语言站要每种语言各自的路径 | 多语言插件通常自带，优先用它 | 中，配置项较多 |
结论是：已经装了 SEO 插件就不要单独再装面包屑插件。两套面包屑同时输出，页面上会出现两条一模一样的路径，结构化数据也会重复，反而对 SEO 不利。相关配置见 WordPress SEO 优化。
导航过多对 SEO 的影响
这里要说准确：导航项数量本身不是排名因素，影响来自三个间接后果。
- 稀释内链权重。首页能传出去的权重是固定的，导航从 6 个链接涨到 30 个，每个链接分到的就少了。重要页面应该出现在导航里，长尾页面更适合放在正文内链或页脚。
- 降低可抓取效率。导航在每个页面重复出现，30 个导航项意味着每抓一个页面就多解析 30 个链接，站内页面多时，蜘蛛预算被大量重复链接消耗。
- 拉低可用性指标。导航拥挤导致误点、移动端需要多次展开，跳出率上升，这类行为数据会间接影响表现。
实操建议：一级导航只放需要被优先收录且用户高频访问的页面，一般 5 到 7 个封顶；「关于我们」「隐私政策」「友情链接」这类放页脚；标签云、归档、日期归档不要放进导航，它们会产生大量低质聚合页。导航链接也不要加 nofollow，站内导航加 nofollow 是纯损失，权重传不出去，蜘蛛也不愿顺着走。
另外提一个影响速度的点：导航用了图标字体或大量阴影、模糊效果时，首屏渲染会变慢。把导航的 CSS 内联到 <head> 里，避免样式表加载完才渲染出导航导致的跳动（CLS）。速度相关的处理见 WordPress 速度优化。
落地顺序建议
- 先画出信息架构：一级几项、每项下面放什么，写成清单再动手。
- 在 外观 → 菜单 里建结构并分配位置，具体操作见菜单设置那篇。
- 定导航高度和 logo 尺寸，用 CSS 变量统一。
- 写移动端断点，768px 以下切汉堡，验证下拉能展开、热区够大。
- 最后加粘性与透明效果，别一开始就叠样式，出问题分不清是谁引起的。
如果是换主题，先确认新主题的导航位置数量和是否支持 Mega Menu，再决定要不要迁移菜单结构。主题选型时把导航能力作为硬指标看，比装好之后改 CSS 划算得多，可参考 WordPress 主题推荐 与 WordPress 主题定制。需要的辅助功能（Mega Menu、面包屑、目录）在 WordPress 必备插件 里有取舍说明。