Change text colour with bootstrap-vue navbar item-dropdown

Question

I am using Bootstrap-Vue to write a web page, but I have trouble changing the text colors on the Bootstrap navbar, especially the b-nav-item-dropdown tag. I have tried using <span class="text-dark" to wrap around the b-nav-item-dropdown tag but that did not work. It appeared that the variant of the b-navbar can only set the text color variants to either dark or light.

Here is my code:

<div>
  <b-navbar toggleable="md" type="dark" variant="primary">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav class="pl-5" inline>

      <b-nav-item-dropdown text="Electronics">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>


      <b-nav-item-dropdown text="Sports">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>

    </b-navbar-nav>
    <!--Login button-->
    <b-navbar-nav class="ml-auto pr-5">
      <b-button size="me">Login</b-button>
    </b-navbar-nav>

  </b-collapse>
</b-navbar>
</div>

My goal is to get all the text in b-nav-item-dropdown to change to black instead of the grey-ash color.

Answer 1

Pass your additional class in the toggle-class prop. For example:

<b-nav-item-dropdown toggle-class="text-dark" text="Electronics">

See https://bootstrap-vue.js.org/docs/components/nav#dropdown-support for more props this component supports.