wordpress外贸建站教程：导航菜单文字和LOGO按扭重叠的处理方法

继续分享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帮你写或完善，这样成功率更高一点。

另外还要注意，只有当导航菜单项目比较多，字数比较长时才会遇到这个问题，如果没有遇到这个问题，那就不要折腾啦。