Изменить цвет фона бутстрапа навбара рухнет без задержки

Question

Я пытаюсь переписать цвет фона свернутой строки меню, что я успешно сделал. Однако проблема в том, что цвет применяется только тогда, когда свернутое меню полностью открыто. Я пытаюсь сделать это с помощью bootstrap-vue в проекте Nuxt. Изменение стиля панели навигации было выполнено с использованием css-файла в папке assets, но я не уверен, что это правильный способ.

Как сделать так, чтобы цвет фона отображался при анимации выпадающего меню? спасибо.

Я сделал копию моего кода проекта на JSFiddle (https://jsfiddle.net/tandeman/ae2s9104/37/), чтобы вы могли посмотреть. Весь код, необходимый для изменения фона, был

.navbar-nav .dropdown-menu {
  background-color: #7E6551;
  border-radius: 10px;
} 

Answer 1

Вам нужно добавить стиль для .navbar-collapse.collapsing, чтобы применить цвет фона, когда меню разворачивается или разворачивается.

Для вас это будет выглядеть так:

.navbar-collapse.collapsing {
  background-color: #7E6551;
  border-radius: 10px;
}

Full JSFiddle здесь .