How to change color of Navbar Links in Bootstrap-vue

Question

I understand how it's done in Bootstrap4 but the same method isn't working in Bootstrap-vue

This is the code in my Homepage.vue file:

<template>
  <div class="forVue">
    <div>
        <b-navbar toggleable="sm" type="dark" variant="dark">

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

            <b-collapse id="nav-collapse" is-nav>

                <b-navbar-nav class="mx-auto">
                    <b-nav-item href="/home">Home</b-nav-item>
                    <b-nav-item href="/home">Services</b-nav-item>
                    <b-nav-item href="/home">Contact</b-nav-item>
                    <b-nav-item href="/about">About Us</b-nav-item>
                </b-navbar-nav>

            </b-collapse>

        </b-navbar>
    </div>
  </div>
</template>

The following is my CSS inside style tags in the same file

<style>
    .nav-item {
        color: red !important;
    }
</style>

This isn't working and the color remains the default. I also cannot understand how to specify the navbar to change the color of the whole navbar without using the !important tag. It works with the following code:

.navbar {
        background-color: red !important;
    }

How can I get that to work without the !important tag?

Does this answer your question? Change text colour with bootstrap-vue navbar item-dropdown — Boussadjra Brahim
– Boussadjra Brahim, Commented Apr 4, 2020 at 14:45
@BoussadjraBrahim, No, it does not. OP specifically asks "How can I get that to work without the !important?". — tao
– tao, Commented Apr 4, 2020 at 15:35

tao · Accepted Answer · 2020-04-04 16:28:12Z

2

To get rid of the !important you simply have to write a more specific selector than the one currently applying.

.nav-link colors seem to have a specificity of 3 × class in BoostrapVue, which means 3 × class + 1 × el will sufice:

.nav-item.nav-item.nav-item a {
  color: red;
}

Note: if you find having to repeat a class selector multiple times cumbersome and generating too much boilerplate code in your CSS, one trick I often use is artificially inflating the specificity of my selectors with 1 × id:

#app .nav-item a { color: red }

Another note on this is that you don't even need to have an ancestor id, because this would also work:

body:not(#_) .nav-item a {
  color: red;
}

... assuming your <body> element does not have id="_".

In scss it gets even simpler, as all you need to do is wrap your current code into body:not(#_) { ...current code ... }.

Over time, I've been getting some comments on this technique as being just as bad as using !important, because it also conflates the specificity and you end up in the same game of making it increasingly more difficult to write even stronger selectors when current ones need overwriting.

My response to that is that the rules of the game are actually set by how CSS works. I haven't made the rules, I'm only playing the game. But the most important part is that, by not using !important, I allow JavaScript driven styling to take precedence, which is the most important reason why usage of !important is bad practice.

A more general answer to this type of questions would be: inspect your element, figure out which rule is applying the current value and write a slightly more specific one (or an equally specific one if you place it in the <style> tag of your component, because that's applied last).

Also note your code has to be in a <style> tag that is not scoped. If it's scoped, prefixing with /deep/, ::v-deep or >>> should work but a recent bug in Vue which has not yet been resolved breaks piercing selectors in <style> tags with lang="scss", if your sass-loader is above 7.* (current latest: 8.0.2). Effectively, it means the following will work:

<style scoped lang="css">
  /deep/ .nav-item.nav-item.nav-item a {
     color: red;
  }
</style>

...(where lang="css" is optional, because it's default), while

<style scoped lang="scss">
   /deep/ .nav-item.nav-item.nav-item a {
     color: red;
  }
</style>

... will not work.

However, this is a (different) bug and it will probably get fixed soon, at which point I'll delete this part of my answer.

edited Apr 4, 2020 at 16:28

answered Apr 4, 2020 at 15:34

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tao Over a year ago

I took the selector from inspecting BootstrapVue website, as I don't have a project with BootstrapVue at hand. Glad I solved your problem. I tried my best to explain the core principle so you (and perhaps others) could sort out this type of problems in the future. I'll update the answer with .nav-link, so others could benefit from it.

tao Over a year ago

@Shahmeer: here's the output of a <b-nav-item>: <li class="nav-item"><a target="_self" href="#" class="nav-link">test</a></li>. So the .nav-link gets applied to the <a> element while the .nav-item gets applied to the <li>. Basically, you need to have a space between .nav-link and a for it to work. Or, without space, you can use .nav-link instead. Hope that makes sense. Cheers!

Shahmeer Over a year ago

Yes I get it! Could you let me know where you checked the output from? Could really help me in the future. Thanks!!

tao Over a year ago

@Shahmeer Add a test item to your component and inspect the resulting DOM. Since I didn't have a BV project, I went to https://codesandbox.io/, selected a Vue template, added BootstrapVue to deps and in main.js I've set Vue to use BV. In HelloWorld.vue I placed <b-navbar><b-nav-item>test</b-nav-item></b-navbar>. Inspected and copy/pasted resulting DOM. :)

tao Over a year ago

If you're asking how to inspect DOM, right-click any element in the page and select "Inspect Element". In devtools> elements you can also right-click and Edit as HTML. Arguably the best browser for development is Google Chrome, for multiple reasons (most compelling being: a) has highest market-share - so you're using what most of your users use; b) has the most complete and advanced set of inspection and audit dev tools), but that's a completely different discussion. :)

|

palaѕн · Accepted Answer · 2020-04-04 14:36:35Z

If you want to change color scheme to red variant you can simply use variant="danger" like:

<b-navbar toggleable="sm" type="dark" variant="danger">

<b-navbar> supports the standard Bootstrap v4 available background color variants. Set the variant prop to one of the following values to change the background color: primary, success, info, warning, danger, dark, or light.

new Vue({
  el: '#app'
})

#app { padding: 20px;}.navbar{margin-bottom:10px}

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-navbar toggleable="sm" type="dark" variant="dark">
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="mx-auto">
        <b-nav-item href="/home">Home</b-nav-item>
        <b-nav-item href="/home">Services</b-nav-item>
        <b-nav-item href="/home">Contact</b-nav-item>
        <b-nav-item href="/about">About Us</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <b-navbar toggleable="sm" type="dark" variant="danger">
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="mx-auto">
        <b-nav-item href="/home">Home</b-nav-item>
        <b-nav-item href="/home">Services</b-nav-item>
        <b-nav-item href="/home">Contact</b-nav-item>
        <b-nav-item href="/about">About Us</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <b-navbar toggleable="sm" type="dark" variant="primary">
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="mx-auto">
        <b-nav-item href="/home">Home</b-nav-item>
        <b-nav-item href="/home">Services</b-nav-item>
        <b-nav-item href="/home">Contact</b-nav-item>
        <b-nav-item href="/about">About Us</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

But what if I want a custom color, one that is not in the Bootstrap standard variants?
You can define your own theme color names (with base color) via Bootstrap's SASS SCSS variables, plus you can override the default them variants with our own colors. See bootstrap-vue.js.org/docs/reference/theming

Collectives™ on Stack Overflow

How to change color of Navbar Links in Bootstrap-vue

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related