Change background color to navbar in bootstrap-vuejs

Question

According with the documentation, the styles for the navigation bar can be set as follows:

<b-navbar toggleable="lg" type="dark" variant="info">
<!-- Or -->
<b-navbar toggleable="lg" type="dark" variant="dark">

Anyway, just by changing the type and variant props. I want however to set a custom background color like #AABB55. I cannot find an easy way to do it.

Furthermore, when you see the documentation and the source code, you don't have many options.

Is there a way to change this property without needing to touch the <b-navbar> code?

silgon · Accepted Answer · 2019-06-30 20:28:15Z

14

Damn. I finished the question and I solved it just after.

So, let's say that I have inside the template

<b-navbar toggleable="lg" type="dark" variant="dark">
  <!-- more stuff -->
</b-navbar>

Then in the style you can just add:

<style scoped>
 .navbar.navbar-dark.bg-dark{
    background-color: #AABB55!important;
 }
</style>

Note: without !important it doesn't work for some reason.

answered Jun 30, 2019 at 20:28

silgon

7,3018 gold badges52 silver badges71 bronze badges

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

2 Comments

Royal Wares Over a year ago

It doesn't work without !important because CSS follows specificity to work out which rule to apply, your rule in theory is not the right one for CSS to apply but with the important flag you raise the specificity calculation for that rule.

Troy Morehouse Over a year ago

With scoped styles, you need to use the /deep/ selector to target inner elements of a child component. vue-loader.vuejs.org/guide/…

Collectives™ on Stack Overflow

Change background color to navbar in bootstrap-vuejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related