发布部分 — Mega Menu & Grid
适用于：移动 Mega Menu，移动 Grid，桌面 Mega Menu
部分菜单是不浮动的 — 它们在页面布局中的特定位置插入。有两种部署方法，可以一起使用：
| 方法 1：插入/替换 | 方法 2：应用块 | |
|---|---|---|
| 平台 | Shopify + Global | 仅限 Shopify |
| 机制 | CSS 选择器 → 在元素之前/之后插入/替换 | 应用块 “Navi+ on Section” 在主题编辑器中 |
| 灵活性 | 高 — 可以嵌入任何地方 | 中 — 受限于 Shopify 部分架构 |
| 设置 | 需要了解 CSS 选择器 | 只需输入嵌入 ID |
方法 1：使用 CSS 选择器插入/替换
推荐的方法 — 适用于 Shopify 和 Global。
步骤 1：嵌入代码
Shopify： 主题编辑器 → 应用嵌入 → 启用 Navi+。仅需一次。
Global： 粘贴到 <head>：
<script>(window._navi_setting ||= []).push({
token: "YOUR_NAVI_TOKEN"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
步骤 2：启用 “通过插入/替换方法发布菜单”
启用切换以展开下面的配置部分。
步骤 3：输入 CSS 选择器
输入一个 CSS 选择器。菜单将相对于匹配的元素放置。
设备特定语法：
| 后缀 | 设备 |
|---|---|
header |
移动和桌面 |
header(M) |
仅限移动 |
header(D) |
仅限桌面 |
流行 Shopify 主题的 CSS 选择器提示：
| 菜单类型 | 目的 | 建议的 CSS 选择器 |
|---|---|---|
| 桌面 Mega | 替换桌面导航 | nav.header__inline-menu ul.list-menu |
| 桌面 Mega | 在标题下方插入 | header |
| 移动 Mega | 在移动标题下方插入 | header |
步骤 4：选择放置位置（插入/替换）
| 值 | 行为 |
|---|---|
| 替换 | 完全用 Navi+ 菜单替换原始元素 |
| 插入之前 | 在元素之前插入 Navi+ 菜单 |
| 插入之后 | 在元素之后插入 Navi+ 菜单 |
选择替换后，考虑添加 CSS 隐藏原始元素，同时加载 Navi+ — 请参见 发布优化。
方法 2：应用块（仅限 Shopify）
如何设置
- 复制菜单的嵌入 ID（在模态中显示 — 点击复制）。
- 转到Shopify 主题编辑器 → 找到“Navi+ on Section” 应用块。
- 将嵌入 ID 粘贴到相应字段中。
- 保存主题。
“在滚动时固定在顶部”
切换以在滚动时将部分菜单固定在页面顶部。
何时使用： 如果主题没有内置的粘性标题，请启用此功能，以便桌面 Mega 菜单在用户向下滚动时保持可见。
两种方法可以一起使用吗？
可以。Shopify 用户可以同时启用两者：
- 应用块用于主题编辑器预览（更稳定，更易于预览）。
- 插入/替换用于在商店前端更精确的放置。
通常只需要一种方法。
按菜单类型的说明
| 菜单 | 设备 | 说明 |
|---|---|---|
| 移动 Mega Menu | 禁用桌面切换 | 仅限移动 |
| 移动标题 | 禁用桌面切换 | 仅限移动 |
| 桌面 Mega Menu | 禁用移动切换 | 仅限桌面 |
| 移动 Grid | 两者 | 无限制 |
故障排除
配置插入/替换后菜单不出现？
- 检查 CSS 选择器是否正确 — 使用开发者工具或 Navi+ 调试模式。
- 检查 “通过插入/替换方法发布菜单” 切换是否已启用。
- 检查应用嵌入/嵌入代码是否到位。
菜单出现两次（重复）？ → 应用块和插入/替换同时处于活动状态。禁用其中一个。