CODEWITHSUNDEEP
cssvue.jssassbootstrap-4bootstrap-vue
Shahmeer
Shahmeer

Reputation: 51

How to change color of Navbar Links in Bootstrap-vue

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?

Upvotes: 3

Views: 5821

Answers (2)

tao
tao

Reputation: 90028

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.

Upvotes: 2

palaѕн
palaѕн

Reputation: 73896

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>

Upvotes: 0

Related Questions