Bootstrap 5固定顶部导航栏切换按钮不显示问题求助

核心原因 #

Bootstrap 5的navbar-toggler-icon（切换按钮图标）颜色是依赖导航栏的主题类（navbar-dark/navbar-light）控制的，而fixed-top类会让导航栏默认保持透明背景。

你的原始代码仅添加了fixed-top，未指定导航栏主题类，导致：

• 切换按钮图标颜色与透明/页面背景色一致，肉眼无法识别（按钮实际存在，只是无颜色对比度）
• 移除fixed-top后，导航栏与页面其他元素形成颜色对比，图标自然显现
• 添加navbar-dark bg-dark后，主题类自动将navbar-toggler-icon设为浅色，与深色背景形成明显对比，因此能正常显示

解决办法 #

只需给导航栏添加对应主题类，保证图标与背景有足够对比度即可，常用方案有三种：

1. 深色主题导航栏（即你测试有效的方案）：

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
    <!-- 内部内容保持不变 -->
</nav>

2. 浅色主题导航栏：
   若偏好浅色背景，搭配navbar-light与浅色背景类（如bg-light）：

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
    <!-- 内部内容保持不变 -->
</nav>

3. 自定义背景+主题类：
   使用自定义背景色时，需对应添加navbar-dark或navbar-light来控制图标颜色，例如自定义蓝色背景：

<nav class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: #0d6efd;">
    <!-- 内部内容保持不变 -->
</nav>

额外提示：你的代码中ml-auto在Bootstrap 5已更新为ms-auto，虽不影响功能，但建议替换以符合新版本规范。

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