导航菜单样式设置
进入主题设置-页面显示-顶部导航栏
电脑端样式
电脑端顶部导航有三种布局可选择,同时您可以设置是否固定在顶部
![图片[1]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-28.png)
实际显示效果:
![图片[2]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-29.png)
![图片[3]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-30.png)
![图片[4]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-31.png)
手机端样式
移动端顶部导航有两种布局选择,弹出菜单有可选择弹出方向
![图片[5]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-32.png)
截图展示:
![图片[6]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-34.png)
![图片[7]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-35.png)
![图片[8]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-33.png)
顶部导航支持自定义背景色和前景色,一定要注意颜色搭配,避免看不清
![图片[9]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/image-36.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_494)
其他功能配置
最后,我们根据需要,配置导航栏的其它功能。
![图片[10]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/20251022155259509-image-230.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_935)
导航栏多功能组件
通过顶部多功能组件,我们可以在顶部导航栏下方添加全宽的幻灯片、视频等,例如我们官方演示站
![图片[11]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/10/20251016130800780-image-155.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_971)
配置教程请查看以下文章:
手机菜单弹窗中添加更多模块
在移动端,我们点击菜单显示按钮后,会弹出菜单,在此处我们可以通过模块配置添加更多的显示内容:
![图片[12]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/20251022160204538-image-231.png)
详细教程请查看此文章:
创建菜单
进入后台->外观->菜单,我们就可以创建菜单明细了,同时我们支持分别设置移动端和PC端的菜单
![图片[13]-Zibll子比主题-顶部导航栏及菜单配置教程-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/20251022160515779-image-232.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_1164)
主题提供PC端菜单和移动端菜单独立设置功能(也可以只设置一个),你可以按需进行设置!为了达到更好的效果,设置菜单有一下几点请注意:
- PC端菜单的一级菜单不要太多,太多会导致换行显示错位
- 移动端菜单最多只支持二级菜单,如果添加了三级菜单则不会显示
- PC端菜单支持多级显示,但建议不要超过二级
创建菜单的详细教程请查看以下文章:
© 版权声明
分享是一种美德,转载请保留原链接
THE END





![Zibll子比主题-V8.5商城系统已更新[2026-01-01][更新日志]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/更新日志.jpg)
![付费阅读、付费资源、付费图库、付费视频等知识付费功能详解及教程[图文教程]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/支付功能-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![子比主题官方推广计划正式上线,推广可获高额奖励[限时推广]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/11/推广计划.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_429,h_300)


![数据库批量替换插件正式发布、一键换域名工具[插件发布]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2023/10/20231013001336588-数据库批量替换插件-列标图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![Zibll子比主题-方便快捷的前端页面设置功能简介[教程]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/主题教程-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_600,h_375)


![zibll子比主题-商城首页创建及配置教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250925203958830-商城首页配置教程-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_497)





- 最新
- 最热
只看作者