Agfdhyk

I'm modifing bootstrap 3 navbar and some CSS properties doesn't apply...

I have this navbar HTML:

<nav class="navbar navbar-default">

<div id="navbar-principal" class="container-fluid">



  <div id="navbar-colapsado" class="navbar-header">

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

      <span class="sr-only">Toggle navigation</span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>

    <a id="logo" class="navbar-brand" (click)="onClick('Inicio')" [class.active]="'Inicio'===itemSelected" [routerLink]="['/']"><img src="app/img/logo.jpg" alt="Logo"></a>

  </div>



  <div id="navbar" class="navbar-collapse collapse">

    <ul class="nav navbar-nav navbar-right">  

      <li><a [routerLink]="['/link']">Inicio</a></li>



      <li role="button" class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info<span class="caret">

        </span></a>

        <ul class="dropdown-menu">

          <li><a [routerLink]="['/linkA']">Mis Compras</a></li>

          <li><a [routerLink]="['/linkB']">Mis Facturas</a></li>

          <li><a [routerLink]="['/linkC']">Mi Cuenta</a></li>

        </ul>

      </li>        



      <li>Other links</li>

      <li>Other links</li>

      <li>Other links</li>



    </ul>

  </div><!--/.nav-collapse -->



  </div><!--/.container-fluid -->

</nav>

I load bootstrap 3 form CDN and override with this CSS code:

:host .nav.navbar-nav.navbar-right > li.dropdown.open,

      .nav.navbar-nav.navbar-right > li.dropdown.open > a,

      .nav.navbar-nav.navbar-right > li.dropdown.open > a:hover{

  color: yellow;

  background-color: rgba(61, 164, 65, 1);

  border-color: #999999;

}

My problem is while "color: yellow" is applied, "background-color" is absolutely ignored.

I've inspected computed css in chrome, and seems it is right... but something is overrides my style!

How I must rewrite bootstrap in order to avoid this?

Just Added Parent class in css to override the default css.

In Below example only right navbar was override by css.

.nav.navbar-nav.navbar-right > li.dropdown.open,

.nav.navbar-nav.navbar-right > li.dropdown.open > a,

.nav.navbar-nav.navbar-right > li.dropdown.open > a:hover{

  color: yellow;

  background: #3da441;

  border-color: #999999;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Brand</a>

    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Link</a></li>        

      </ul>

      

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

I finally found the problem!

It was because background-image (included in bootstrap) imposed on background-color.

I've fixed adding this code to the component css file:

.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,

.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {

  background-color: rgba(61, 164, 65, 0.1);

  background-image: none;

}

.navbar-default .navbar-nav .open .dropdown-menu > .active > a,

.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,

.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {

  background-color: rgba(61, 164, 65, 0.1);

  background-image: none;

}

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus {

  background-color: rgba(61, 164, 65, 0.1);

  background-image: none;

}

.navbar-default .navbar-nav > .open > a,

.navbar-default .navbar-nav > .open > a:hover,

.navbar-default .navbar-nav > .open > a:focus {

  background-color: rgba(61, 164, 65, 0.1);

  background-image: none;