CODEWITHSUNDEEP
cssvue.jsbootstrap-vue
SEGOAT
SEGOAT

Reputation: 58

Change text color of a dropdown menu in bootstrap-vue

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?

Upvotes: 3

Views: 5223

Answers (2)

pasanjg
pasanjg

Reputation: 646

Try variant property

<b-dropdown-item variant="dark" href="#">EN</b-dropdown-item>

Upvotes: 4

ittus
ittus

Reputation: 22393

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;
}

Upvotes: 8

Related Questions