Bootstrap Change color dropdown?

Question

Bootstrap Change color dropdown?

Navigation

#1 by (2 votes)

0

Good morning, everyone. I'm trying to change the color of the dropdown using Bootstrap 3.

"C_name" looks white when you have the mouse on it:

When the mouse is removed it looks gray:

What I want to change is the color gray to orange.

HTML:

    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="">WP</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#pedidos">PEDIDOS</a></li>
        <li><a href="#productos">MIS PRODUCTOS</a></li>

        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user">
            </span>NOMBRE_C<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Mi Cuenta</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-off"></span>Cerrar Sesión</a></li>
            </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

CSS:

  .navbar {
  margin-bottom: 0;
  background-color: #f4511e;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: Montserrat, sans-serif;

  .navbar li a, .navbar .navbar-brand {
  color: #fff !important;

  .navbar-nav li a:hover, .navbar-nav li.active a {
      color: #f4511e !important;
      background-color: #fff !important;

  .navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;

.dropdown li a {
      color: #f4511e !important;

css bootstrap

asked by L_C 13.01.2018 в 14:48

source

1 answer

ForEach javascript Problem 'System.OutOfMemoryException' when loading flat file

score 2 · Accepted Answer

You can overwrite the default color of bootstrap with:

.navbar-default .navbar-nav>.open>a.dropdown-toggle{
  background-color: #f4511e !important;
}

Something like this:

.navbar {
  margin-bottom: 0;
  background-color: #f4511e;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
  color: #f4511e !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.dropdown li a {
  color: #f4511e !important;
}
.navbar-default .navbar-nav>.open>a.dropdown-toggle{
  background-color: #f4511e !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="">WP</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#pedidos">PEDIDOS</a></li>
        <li><a href="#productos">MIS PRODUCTOS</a></li>

        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user">
            </span>NOMBRE_C<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Mi Cuenta</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-off"></span>Cerrar Sesión</a></li>
            </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>