需嵌入SharePoint母版页的响应式横幅导航小屏适配实现问题

实现移动端导航收纳功能，不是必须依赖:before/:after伪类。伪类仅作为装饰性实现的可选项，核心功能靠布局调整、媒体查询、简单交互逻辑就能完成。

现有代码调整后仍未生效的核心原因 #

• Flex容器内部冗余混用float属性：原代码给导航链接、下拉组件、logo都加了float:left/right，Flex布局下float会失效，同时打乱元素正常排列，直接导致导航溢出偏移
• 固定高度设置不合理：.navbar写死height:94px，小屏展开折叠导航时，多余的内容会被裁切，哪怕去掉overflow:hidden也会因为高度固定挤出版面
• 响应式逻辑缺失：新增的.newDiv仅在媒体查询里被设置了50%宽度，没有做导航的显隐控制、布局方向切换，根本没实现“小屏收纳导航”的核心需求
• 交互逻辑不适配移动端：原有下拉菜单靠:hover触发，移动端没有鼠标悬浮事件，就算做了收纳按钮也无法正常点击展开

落地实现步骤 #

1. 重构基础DOM结构，把所有导航类元素单独封装成独立容器，和两个logo同属navbar的Flex子项，结构示例：

   <div class="navbar">
     <img class="armylogo" alt="左侧标识">
     <button class="nav-toggle">☰</button> <!-- 仅小屏显示的汉堡触发按钮 -->
     <div class="nav-links"> <!-- 所有导航链接、原有下拉组件全部移到这里 -->
       <a href="#home">Home</a>
       <a href="#news">News</a>
       <!-- 其余导航链接、原有Dropdown组件 -->
     </div>
     <img class="armylogo2" alt="右侧标识">
   </div>
   

2. 清理冗余样式：删掉所有子元素上的float属性，Flex布局下完全靠容器的对齐规则控制位置，不需要float；把.navbar的固定height:94px改成min-height:94px，允许内容撑开高度避免裁切
3. 分档设置媒体查询逻辑：
   • 桌面端（视口宽度>768px）：将.nav-toggle按钮设为display:none，.nav-links默认显示、横向排列，两个logo正常分列两端
   • 移动端（视口宽度≤768px）：将.nav-links默认设为隐藏，调整为绝对定位贴在navbar下方、宽度撑满、纵向排列所有导航项；此时显示.nav-toggle按钮
4. 补充极简交互逻辑：给汉堡按钮绑定点击事件，切换.nav-links的激活类（比如.active），控制折叠导航的显隐即可
5. 关于伪类的可选用法：如果要自己实现汉堡按钮的三条横线视觉效果，可以通过按钮本体+:before/:after伪类分别绘制上下两条横线，不需要额外加空DOM元素；如果直接用内置图标库的汉堡图标，完全可以不用伪类实现同样效果

最终实现的小屏效果和预期一致：左右两侧logo始终保留，中间放置折叠触发按钮，所有导航链接收纳在按钮点击展开的纵向菜单里，不会出现导航溢出遮挡logo的问题。

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