Change text color of a dropdown menu in bootstrap-vue

Issue

I'm creating a website and using boostrap-vue to add a navbar to the top of the screen. The right side of the navbar will contain a dropdown menu titled "Lang". I would like the "Lang" text to be black. The text is currently white, and I cannot find a way to change it.

I've tried the following css code which changes the color of my navbar items, but the "Lang" remains the same white/gray color.

.dropdown {
color: #000!important; 
}

.navbar-dark .navbar-nav .nav-link {
    color: #000!important;
}

This is the code for my navbar:

    <b-navbar class="w-50 mx-auto" toggleable="lg" type="dark" variant="info" :sticky="true" bg-foobar>
    <!--<b-navbar-brand href="#">NavBar</b-navbar-brand>-->
    <b-img :src="require('../assets/BlueLogoPNG.png')" class="logo"></b-img>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="ml-auto" >
        <b-nav-item href=""><b>Planet Pluto</b></b-nav-item>
        <b-nav-item href="#"><b>About Us</b></b-nav-item>
        <b-nav-item href=""><b>Support</b></b-nav-item>
        <b-nav-item href="#"><b>Credits</b></b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items-->
      <b-navbar-nav class="ml-auto">

        <b-nav-item-dropdown toggle-class="nav-link-custom" text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
    <BNav/>

  </div>

I can control the background-color via the .dropdown class, but not the color. The Lang text needs to be color code #000.

The devtools show that the text color is being controlled via the .navbar-dark .navbar-nav .nav-link classes. Adding color:#000!important from the google chrome dev tools produces the desired result. Adding this to the source code will change the color for all navbar items except for my dropdown.

How can I change the text color of my Lang dropdown menu to black?

Solution

You can use deep selector

::v-deep .nav-link {
   color: #000!important;
}

more restriction on dropdown only

::v-deep .dropdown .nav-link {
   color: #000!important;
}

Answered By - ittus