移动端禁用顶部导航栏：2017主题站点导航栏移除问题求助

看起来你遇到的问题是WordPress 2017主题的移动端专属导航元素（蓝色下拉菜单+搜索栏）无法通过常规CSS隐藏，这大概率是因为主题原生CSS的优先级更高，或者这些元素是针对移动端媒体查询加载的，你的代码没覆盖到对应的场景。我给你几个针对性的解决方案，按顺序尝试就行：

方案一：高优先级的移动端专属CSS #

先试试这个更精准的CSS代码，它专门针对移动端屏幕（宽度小于768px），并且用!important强制覆盖主题的样式：

/* 仅在移动端隐藏导航栏、菜单按钮和搜索栏 */
@media only screen and (max-width: 767px) {
    /* 隐藏顶部导航容器 */
    .navigation-top {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    /* 隐藏移动端搜索按钮 */
    .site-header .search-toggle {
        display: none !important;
    }
    /* 隐藏移动端菜单触发按钮 */
    .menu-toggle {
        display: none !important;
    }
}

把这段代码粘贴到WordPress后台的外观 → 自定义 → 额外CSS里保存，然后用手机刷新页面看看效果。

为什么之前的代码没生效？ #

你之前用的.navigation-top { display: none; }没有针对移动端媒体查询，而且主题的原生CSS可能给移动端的导航元素加了更具体的选择器，导致你的样式优先级不够。加上!important和媒体查询后，就能确保只在手机端生效，并且强制覆盖主题样式。

方案二：用JS彻底移除元素（如果CSS还是无效） #

如果CSS仍然没效果，可能是这些元素是通过JS动态生成的，这时候可以用一段简单的JS代码直接移除它们。你不需要懂JS，只要按步骤操作：

1. 打开WordPress后台的外观 → 主题文件编辑器（如果看不到这个选项，需要先在服务器上开启文件编辑权限，或者用FTP工具打开主题文件）
2. 在右侧找到footer.php文件并打开
3. 在文件最后找到</body>标签，在它的上方粘贴这段代码：

// 页面加载完成后移除移动端导航和搜索元素
document.addEventListener('DOMContentLoaded', function() {
    // 移除顶部导航栏
    const navTopElement = document.querySelector('.navigation-top');
    if (navTopElement) navTopElement.remove();
    // 移除搜索按钮
    const searchBtn = document.querySelector('.search-toggle');
    if (searchBtn) searchBtn.remove();
    // 移除菜单按钮
    const menuBtn = document.querySelector('.menu-toggle');
    if (menuBtn) menuBtn.remove();
});

4. 点击“更新文件”保存，然后用手机测试。

注意事项 #

• 直接修改主题文件的话，下次主题更新时代码会丢失，建议你先创建一个子主题，然后在子主题的footer.php里修改，这样更安全。
• 如果不想改主题文件，也可以用WordPress的自定义HTML小工具，把这段JS代码放在页脚区域的小工具里。

内容的提问来源于stack exchange，提问作者Ashley H