移动端导航菜单的渐变效果是自定义添加的，源于 background-image: linear-gradient() 覆盖；需检查并移除全局CSS、内联样式、工具类中的渐变声明，同时注意JS动态注入和 backdrop-filter 的视觉干扰。
为什么移动端导航菜单会有渐变效果
Bootstrap 5 默认的 .navbar 不带任何渐变，你看到的渐变一定是自定义加上的——最常见的是通过 background-image: linear-gradient() 手动覆盖了背景。有些主题或脚手架（比如某些 Bootstrap 模板、VuePress 插件、或旧版兼容写法）会默认给 .navbar 加渐变层，尤其在配合 backdrop-filter 做毛玻璃效果时，常连带声明 background-image。
直接删掉渐变 CSS 的三种位置
检查并移除以下三类代码中任意一处的渐变声明：
- 全局 CSS 文件里对
.navbar或自定义类（如.navbar-mytheme）写的background-image: linear-gradient(...) - HTML 中内联的
style="background-image: linear-gradient(...)”（哪怕只有一行，也会覆盖外部样式） - 使用了 Bootstrap 的
bg-gradient-*工具类（如bg-gradient-to-r），这类类名本身不生效于.navbar，但若搭配了自定义 CSS 强制启用，就得一并删掉
重点：别只删 background-color，渐变是独立属性；也别只删工具类而忽略背后的手动 background 完整重写规则。
确认是否被 JavaScript 动态注入渐变
如果你用了滚动变色逻辑（比如 .navbar-scrolled 类切换），检查 JS 是否在添加该类时写了类似这样的代码：
navbar.classList.add('navbar-scrolled');
// 然后某处 CSS 是：
.navbar-scrolled {
background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
}这种情况下，取消渐变不是删 HTML，而是删掉对应 CSS 规则，或把 background 改成纯色声明，例如：
.navbar-scrolled {
background-color: rgba(255, 255, 255, 0.95);
/* 删掉 background-image 或整个 background 声明 */
}容易被忽略的 backdrop-filter 干扰
即使你删光了所有渐变，如果还保留着 backdrop-filter: blur(10px)，iOS Safari 和部分安卓 WebView 会强制启用半透明白色底层来模拟毛玻璃，视觉上像“淡出渐变”。这不是真正的渐变，但用户感知一样。要彻底取消，必须同时移除：
backdrop-filter-webkit-backdrop-filter- 确保父容器没有透传
background-color或background-image
真要保留毛玻璃又不要渐变，用纯色 background-color: rgba(255,255,255,0.85) 配合 backdrop-filter 更可控。
