Search code examples
vue.jsnavbarbootstrap-vuehamburger-menu

Change Color Of Bootstrap Vue Collapsed Navbar Icon

I have integrated Bootstrap Vue into my project and am having a hard time customizing it. Specifically, I am talking about the Navbar component.

I have read the documentation and saw that I can apply a variant to the navbar that will define the color of the whole navbar.

Thing is, I didn't provide a variant to the navbar (and don't want to) and when it collapses, the collapsed menu icon (hamburger menu icon) is black and is not visible due to the background color of my website.

I have inspected the DOM of the website and used the following CSS rules and selectors:

  • .navbar-toggle

  • .navbar-toggler

  • .navbar-toggler-icon

With each of them I tried to apply the rule:

color: white !important;

but this had no result.

I have looked online and in SO, but found nothing that addresses this scenario.

Navbar open: Navbar

Navbar collapsed: Collapsed

Obviously, I can change the background color of my website, but I prefer not to do that as I do not want to change the look and feel of the website just because of a minor issue (and I want to be able to know how to overcome this).

Link to code

Solution

  • I managed to solve this scenario by using the following selector:

    .navbar-toggler > .navbar-toggler-icon {
  background-color: white; 
}

    Screenshot

    @Ivan Klochkov pointed me in the right direction, but I had to mess a bit with the correct selectors.