我正在尝试使导航菜单在我的 WordPress 网站上响应式工作,但遇到以下问题:
我有一个两列标题,50/50 盒装结构 - 左侧是徽标,右侧是导航菜单。
我在站点设置中添加了以下断点:
手机肖像 - 767px 移动横向 - 880px 平板电脑纵向 - 1400px 平板电脑横向 - 1200px 笔记本电脑 - 1366px 宽屏 - 2400px
汉堡在以下断点处启动: 手机肖像 - 767px 移动横向 - 880px 平板电脑肖像 - 1400px
导航菜单完美显示完整菜单: 宽屏 - 2400px
对于以下断点,菜单将变为两行并丢失所有样式 平板电脑横向 - 1200px 笔记本电脑 - 1366px
请您帮忙解释为什么平板电脑景观和笔记本电脑断点会对导航菜单执行此操作?我可以尝试什么来解决这些问题?
此标头没有执行自定义编码 - 仅使用 Wordpress GUI
我尝试过增加导航栏列的宽度,但没有解决问题
我还尝试重新创建一个新标题,但也没有成功
您可能需要在这些断点处检查应用于导航菜单及其容器的 CSS 样式。
使用浏览器开发人员工具分析正在应用的样式并识别任何冲突的规则或覆盖。确保在这些断点处为导航元素设置适当的宽度、填充和边距,以保持所需的布局。
如有必要,您可能需要调整 CSS 样式以适应不同的屏幕尺寸,并在各种设备上保持一致且有吸引力的设计。