Buefy移动端汉堡导航菜单背景色失效及hover样式配置问题

1. 修复移动端导航菜单背景色 #

Buefy的移动端展开菜单（.navbar-dropdown）默认不会继承导航栏的背景样式，你可以通过两种方式解决：

方式一：自定义CSS（快速生效） #

给<b-navbar>添加一个自定义类，比如dark-navbar，然后通过CSS指定下拉菜单的背景：

<b-navbar type="has-background-primary-dark is-primary" class="dark-navbar">
  <!-- 你的导航栏内容 -->
</b-navbar>

.dark-navbar .navbar-dropdown {
  background-color: var(--bulma-primary-dark);
}

使用var(--bulma-primary-dark)可以直接复用Bulma的颜色变量，避免硬编码颜色值。

方式二：修改Sass变量（全局生效） #

如果项目使用Sass，在导入Buefy前覆盖对应的变量，这样所有导航栏的下拉菜单都会统一样式：

// 先覆盖Bulma/Buefy变量
$primary: #00d1b2; // Bulma原生主色
$primary-dark: #009e8a;
$navbar-dropdown-background-color: $primary-dark;

// 导入Buefy样式
@import "~buefy/src/scss/buefy";

2. 配置移动端菜单hover样式 #

同样可以通过自定义CSS或Sass变量实现：

方式一：自定义CSS #

.dark-navbar .navbar-dropdown .navbar-item:hover {
  background-color: var(--bulma-primary); // 鼠标悬停时用主色
  color: #fff;
}

方式二：修改Sass变量 #

// 在导入Buefy前添加以下变量
$navbar-item-hover-background-color: $primary;
$navbar-item-hover-color: #fff;

验证要点 #

• 确保<b-navbar>的type属性包含has-background-primary-dark和is-primary，维持桌面端样式正常。
• 如果使用Sass变量，变量覆盖必须在导入Buefy样式之前，否则不会生效。

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