继续分享wordpress外贸建站教程。分享一个我近期wordpress外贸建站项目中遇到的一个很小但有些麻烦的问题处理过程。
如上图所示，一个wordpress外贸网站，在PC端或大尺寸的笔记本显示都是比较完美的，但是在一些小尺寸的笔记本上或一个特殊尺寸的设备上，页眉的导航菜单显示和LOGO、按钮等元素重合了。这个我不清楚算不算问题，以前基本没遇到，有些即使遇到了也都忽略了，因为这个尺寸稍微再小点达到移动断点后它就会切换成移动端菜单。
如果一定要较真，那么我们就只能通过修改主题的默认移动断点来修复了。我的这个wordpress外贸建站项目使用到了Blocksy主题，它的菜单也是使用的主题的自带页眉功能，而主题本身没有自定义断点的功能。经过分析有大概有两种处理方法。
方法一：使用Elementor制作网站页眉
如果熟悉Elementor的话，方法一会比较简单，直接用Elementor的主题生成器制作页眉替换Blocksy的页眉功能就可以了。Elementor默认的页眉一般都不会有什么问题，即使还有问题，我们也可以在elementor中修改移动断点，比如添加一个1200px的断点。
方法二：使用CSS代码修改
我们需要先找到主题的样式代码。经过搜索发现Blocksy主题的页眉部分样式代码位置在/blocksy/static/bundle/main.min.css这个目录中。
@media(max-width: 999.98px)如上所示，找到代码中类似这断代码，可以发现主题默认的断点是999.98px，所以在一些小尺寸笔记本上，当菜单项目较多时，它就可能显示重迭。因为还没来得及切换到移动菜单。
接下来我们要做的就是修改这个数值，让它在更高的宽度时就开始切换，比如增加200，修改为1199.98px。
@media(max-width: 1199.98px){#header [data-device=desktop]{display:none}}
@media(max-width: 1199.98px){[data-device=mobile][data-transparent]{position:absolute;top:0;left:0;right:0}}如果网站没有使用固定页眉或透明页眉功能，那么可以先直接尝试上面的代码，把它添加到wordpress网站的【外观】-【自定义】-【额外CSS】中。
如果网站使用了固定页眉和透明页眉功能，那代码会更复杂一些，可 以直接参考我下面的代码。
/* 修改主题移动端断点为1199.98px */
@media (max-width: 1199.98px) {
/* 隐藏桌面菜单，显示移动菜单按钮 */
#header [data-device=desktop] {
display: none !important;
}
#header [data-device=mobile] {
display: block !important;
}
/* 确保页眉容器始终显示 */
#header [data-row] {
display: flex !important;
}
/* 确保页眉中的列和内容显示 */
#header [data-column],
#header [data-items],
.site-branding,
.ct-header-trigger {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 强制显示移动端菜单内容 */
#offcanvas [data-device=mobile] {
display: block !important;
}
#offcanvas [data-device=desktop] {
display: none !important;
}
/* 确保移动菜单面板在1200px时就能正常显示 */
.ct-panel [data-device=mobile] {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 确保导航菜单在移动端显示 */
.mobile-menu {
display: flex !important;
}
/* 确保菜单项显示 */
.mobile-menu li,
.mobile-menu .ct-menu-link {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
}
@media (min-width: 1200px) {
/* 在1199.98px以上隐藏移动菜单，显示桌面菜单 */
#header [data-device=mobile] {
display: none !important;
}
#header [data-device=desktop] {
display: block !important;
}
/* 在桌面端隐藏移动菜单内容 */
#offcanvas [data-device=mobile] {
display: none !important;
}
}
/* 保持透明菜单样式 */
@media (max-width: 1199.98px) {
[data-device=mobile][data-transparent] {
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
@media (min-width: 1200px) {
[data-device=desktop][data-transparent] {
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
/* 修复offcanvas面板显示 */
@media (max-width: 1199.98px) {
#offcanvas [data-device=desktop] {
display: none !important;
}
#offcanvas [data-device=mobile] {
display: block !important;
}
}如上所示，把它添加到wordpress网站的【外观】-【自定义】-【额外CSS】中，然后发布即可，如果有安装缓存插件，可以清空一下缓存。
如上图所示，这样当屏幕的尺寸在1200PX时，页眉屏幕就会提前切换到移动端的弹出式菜单，这样就不会显示重合了。
这里还要注意一下，上面的代码仅在我自己的wordpress外贸建站项目中测试，其它网站不一定有效。大家在找到对应的主题样式代码时，可以直接把代码发给AI，提出需求，让AI帮你写或完善，这样成功率更高一点。
另外还要注意，只有当导航菜单项目比较多，字数比较长时才会遇到这个问题，如果没有遇到这个问题，那就不要折腾啦。
📚WordPress/Elementor建站课程购买,报名 ↘YRWP模板购买
推荐阅读
如果觉得我分享的内容对您有所帮助
😘请帮忙分享、点赞、在看 谢谢啦😘