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.
Don't try to wrap your components with extra elements and classes, just inspect your DOM and get the rule applied to that element and change it to a custom one. i had followed that process and i get the color
applied to b-nav-item-dropdown
which is #ffffff80
applied to this selector .navbar-dark .navbar-nav .nav-link
, So let's change it to black
as follow :
<template>
...
</template>
<style>
.navbar-dark .navbar-nav .nav-link{
color:black!important
}
</style>