如何修改网站代码实现移动端导航栏隐藏且不影响正常显示？

代码库是否区分常规版和移动端版本 #

大部分现代网页项目不会单独维护常规版和移动端两套代码，都是靠响应式设计用一套代码适配不同屏幕尺寸。只有少数老旧项目可能会拆分两套代码，但这不是当前主流做法。

具体解决方法 #

核心用CSS的**媒体查询（Media Queries）**就能实现，完全不用改动常规尺寸下的显示逻辑，只针对移动端尺寸设置隐藏规则。

1. 定位导航栏的选择器 #

先找到你的导航栏对应的HTML元素，比如它的类名是main-navbar，HTML结构大概是：

<nav class="main-navbar">
  <!-- 导航菜单内容 -->
</nav>

2. 添加媒体查询规则 #

在项目的CSS文件里加这段代码（以768px作为移动端断点，你可以根据自己的需求调整这个数值）：

/* 常规尺寸下导航栏保持原有显示样式，这里不用改你原来的代码 */
.main-navbar {
  display: block; /* 或者你原本的display属性值 */
}

/* 当屏幕宽度≤768px时，隐藏导航栏 */
@media (max-width: 768px) {
  .main-navbar {
    display: none;
  }
}

补充细节 #

• 断点值可灵活调整：比如如果要针对更小的手机屏幕，可改成max-width: 480px。
• 样式冲突处理：如果原有样式优先级更高，导致display: none不生效，可临时加!important（尽量少用，优先通过调整选择器权重解决）。
• 用CSS预处理器的写法：如果项目用Sass/Less，可嵌套写，更简洁：

.main-navbar {
  display: block;

  @media (max-width: 768px) {
    display: none;
  }
}

特殊情况处理 #

如果你的项目真的是两套独立代码（常规版+移动端），那直接找到移动端代码里的导航栏部分，删掉对应的HTML或设置display: none即可，但这种架构现在已经很少见了，优先用响应式方案。

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