Skip to main content
se añadieron 1091 caracteres en el cuerpo
Origen Enlace
Alvarez
  • 4k
  • 4
  • 18
  • 39
#footer{
background-color:black;
}

nav.navbar {
  background-color: #ae2822;
}

.navbar .navbar-brand {
  color: #f9f7f7;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #c91b1b;
}

.navbar .navbar-text {
  color: #f9f7f7;
}

.navbar .navbar-nav .nav-link {
  color: #f9f7f7;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #c91b1b;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #c91b1b;
  background-color: #f9f9f9;
}

.navbar .navbar-toggle {
  border-color: #f9f9f9;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #f9f9f9;
}

.navbar .navbar-toggle .navbar-toggler-icon {
  color: #f9f7f7;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #f9f7f7;
}

.navbar .navbar-link {
  color: #f9f7f7;
}

.navbar .navbar-link:hover {
  color: #c91b1b;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #f9f7f7;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #c91b1b;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #c91b1b;
  background-color: #f9f9f9;
}


}
.thumb-name {
  font-weight: bold;
  display: block;
}
.stock-counter {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  right: 21px;
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}
.low-stock-alert {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  left: 21px;
  color: red;
}
.item-quantity {
  font-size: 40px;
}
.current-stock {
  font-size: 99px;
  font-weight: bold;
}
.item-number {
  font-size: 20px;
}
.item-title {
  font-size: 23px;
  font-weight: bold;
}
.item-price {
  font-size: 23px;
  font-weight: bold;
  color: #388e3c;
}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #3c763d;
  border-color: #ccc;
}
a {
  color: #3c763d;
}
<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 ">
  <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="#">Simple Stock</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="<?php if (isset($active_productos)){echo $active_productos;}?>"><a href="stock.php"><i class='glyphicon glyphicon-barcode'></i> Inventario</a></li>
        <li class="<?php if (isset($active_categoria)){echo $active_categoria;}?>"><a href="categorias.php"><i class='glyphicon glyphicon-tags'></i> Categorías</a></li>
        <li class="<?php if (isset($active_usuarios)){echo $active_usuarios;}?>"><a href="usuarios.php"><i  class='glyphicon glyphicon-user'></i> Usuarios</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://obedalvarado.pw/contacto/" target='_blank'><i class='glyphicon glyphicon-envelope'></i> Soporte</a></li>
        <li><a href="login.php?logout"><i class='glyphicon glyphicon-off'></i> Salir</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
Editada: solo tienes que darle un id al footer, y 
despues darle el color que quieras: te dejo el ejemplo,
 si te fijas llame id="footer" a el div y 
luego aplique css a ese id, 
#footer{background-color:black}

<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
  <div class="container">
    <p class="navbar-text pull-left">&copy
      <?php echo date('Y');?> - Swisslub soluciones Integrales
    </p>
    <div class="navbar-text pull-right">
      <?php  echo  $_SESSION['firstname'];?> &nbsp &nbsp &nbsp &nbsp &nbsp
      <?php  echo  $_SESSION['user_permision'];?>

    </div>
  </div>
  <div class="container">

  </div>
</div>

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
   0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
nav.navbar {
  background-color: #ae2822;
}

.navbar .navbar-brand {
  color: #f9f7f7;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #c91b1b;
}

.navbar .navbar-text {
  color: #f9f7f7;
}

.navbar .navbar-nav .nav-link {
  color: #f9f7f7;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #c91b1b;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #c91b1b;
  background-color: #f9f9f9;
}

.navbar .navbar-toggle {
  border-color: #f9f9f9;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #f9f9f9;
}

.navbar .navbar-toggle .navbar-toggler-icon {
  color: #f9f7f7;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #f9f7f7;
}

.navbar .navbar-link {
  color: #f9f7f7;
}

.navbar .navbar-link:hover {
  color: #c91b1b;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #f9f7f7;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #c91b1b;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #c91b1b;
  background-color: #f9f9f9;
}


}
.thumb-name {
  font-weight: bold;
  display: block;
}
.stock-counter {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  right: 21px;
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}
.low-stock-alert {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  left: 21px;
  color: red;
}
.item-quantity {
  font-size: 40px;
}
.current-stock {
  font-size: 99px;
  font-weight: bold;
}
.item-number {
  font-size: 20px;
}
.item-title {
  font-size: 23px;
  font-weight: bold;
}
.item-price {
  font-size: 23px;
  font-weight: bold;
  color: #388e3c;
}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #3c763d;
  border-color: #ccc;
}
a {
  color: #3c763d;
}
<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 ">
  <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="#">Simple Stock</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="<?php if (isset($active_productos)){echo $active_productos;}?>"><a href="stock.php"><i class='glyphicon glyphicon-barcode'></i> Inventario</a></li>
        <li class="<?php if (isset($active_categoria)){echo $active_categoria;}?>"><a href="categorias.php"><i class='glyphicon glyphicon-tags'></i> Categorías</a></li>
        <li class="<?php if (isset($active_usuarios)){echo $active_usuarios;}?>"><a href="usuarios.php"><i  class='glyphicon glyphicon-user'></i> Usuarios</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://obedalvarado.pw/contacto/" target='_blank'><i class='glyphicon glyphicon-envelope'></i> Soporte</a></li>
        <li><a href="login.php?logout"><i class='glyphicon glyphicon-off'></i> Salir</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
#footer{
background-color:black;
}

nav.navbar {
  background-color: #ae2822;
}

.navbar .navbar-brand {
  color: #f9f7f7;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #c91b1b;
}

.navbar .navbar-text {
  color: #f9f7f7;
}

.navbar .navbar-nav .nav-link {
  color: #f9f7f7;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #c91b1b;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #c91b1b;
  background-color: #f9f9f9;
}

.navbar .navbar-toggle {
  border-color: #f9f9f9;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #f9f9f9;
}

.navbar .navbar-toggle .navbar-toggler-icon {
  color: #f9f7f7;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #f9f7f7;
}

.navbar .navbar-link {
  color: #f9f7f7;
}

.navbar .navbar-link:hover {
  color: #c91b1b;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #f9f7f7;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #c91b1b;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #c91b1b;
  background-color: #f9f9f9;
}


}
.thumb-name {
  font-weight: bold;
  display: block;
}
.stock-counter {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  right: 21px;
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}
.low-stock-alert {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  left: 21px;
  color: red;
}
.item-quantity {
  font-size: 40px;
}
.current-stock {
  font-size: 99px;
  font-weight: bold;
}
.item-number {
  font-size: 20px;
}
.item-title {
  font-size: 23px;
  font-weight: bold;
}
.item-price {
  font-size: 23px;
  font-weight: bold;
  color: #388e3c;
}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #3c763d;
  border-color: #ccc;
}
a {
  color: #3c763d;
}
<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 ">
  <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="#">Simple Stock</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="<?php if (isset($active_productos)){echo $active_productos;}?>"><a href="stock.php"><i class='glyphicon glyphicon-barcode'></i> Inventario</a></li>
        <li class="<?php if (isset($active_categoria)){echo $active_categoria;}?>"><a href="categorias.php"><i class='glyphicon glyphicon-tags'></i> Categorías</a></li>
        <li class="<?php if (isset($active_usuarios)){echo $active_usuarios;}?>"><a href="usuarios.php"><i  class='glyphicon glyphicon-user'></i> Usuarios</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://obedalvarado.pw/contacto/" target='_blank'><i class='glyphicon glyphicon-envelope'></i> Soporte</a></li>
        <li><a href="login.php?logout"><i class='glyphicon glyphicon-off'></i> Salir</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
Editada: solo tienes que darle un id al footer, y 
despues darle el color que quieras: te dejo el ejemplo,
 si te fijas llame id="footer" a el div y 
luego aplique css a ese id, 
#footer{background-color:black}

<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
  <div class="container">
    <p class="navbar-text pull-left">&copy
      <?php echo date('Y');?> - Swisslub soluciones Integrales
    </p>
    <div class="navbar-text pull-right">
      <?php  echo  $_SESSION['firstname'];?> &nbsp &nbsp &nbsp &nbsp &nbsp
      <?php  echo  $_SESSION['user_permision'];?>

    </div>
  </div>
  <div class="container">

  </div>
</div>

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
   0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
se añadieron 549 caracteres en el cuerpo
Origen Enlace
Alvarez
  • 4k
  • 4
  • 18
  • 39
    nav.navbar {
        background-color: #ae2822;
    }

    .navbar .navbar-brand {
      color: #f9f7f7;
    }

    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus {
      color: #c91b1b;
    }

    .navbar .navbar-text {
      color: #f9f7f7;
    }

    .navbar .navbar-nav .nav-link {
      color: #f9f7f7;
      border-radius: .25rem;
      margin: 0 0.25em;
    }

    .navbar .navbar-nav .nav-link:not(.disabled):hover,
    .navbar .navbar-nav .nav-link:not(.disabled):focus {
      color: #c91b1b;
    }

    .navbar .navbar-nav .nav-item.active .nav-link,
    .navbar .navbar-nav .nav-item.active .nav-link:hover,
    .navbar .navbar-nav .nav-item.active .nav-link:focus,
    .navbar .navbar-nav .nav-item.show .nav-link,
    .navbar .navbar-nav .nav-item.show .nav-link:hover,
    .navbar .navbar-nav .nav-item.show .nav-link:focus {
      color: #c91b1b;
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle {
      border-color: #f9f9f9;
    }

    .navbar .navbar-toggle:hover,
    .navbar .navbar-toggle:focus {
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle .navbar-toggler-icon {
      color: #f9f7f7;
    }

    .navbar .navbar-collapse,
    .navbar .navbar-form {
      border-color: #f9f7f7;
    }

    .navbar .navbar-link {
      color: #f9f7f7;
    }

    .navbar .navbar-link:hover {
      color: #c91b1b;
    }

    @media (max-width: 575px) {
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 767px) {
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 991px) {
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 1199px) {
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #f9f7f7;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #c91b1b;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #c91b1b;
      background-color: #f9f9f9;
    }


    }
    .thumb-name {
      font-weight: bold;
      display: block;
    }
    .stock-counter {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      right: 21px;
    }
    .badge {
      display: inline-block;
      min-width: 10px;
      padding: 3px 7px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      background-color: #777;
      border-radius: 10px;
    }
    .low-stock-alert {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      left: 21px;
      color: red;
    }
    .item-quantity {
      font-size: 40px;
    }
    .current-stock {
      font-size: 99px;
      font-weight: bold;
    }
    .item-number {
      font-size: 20px;
    }
    .item-title {
      font-size: 23px;
      font-weight: bold;
    }
    .item-price {
      font-size: 23px;
      font-weight: bold;
      color: #388e3c;
    }
    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover {
      z-index: 3;
      color: #fff;
      cursor: default;
      background-color: #3c763d;
      border-color: #ccc;
    }
    a {
      color: #3c763d;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptscript>
<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 <navclass="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-default">collapse-1" aria-expanded="false">
      <div class="container <span class="sr-fluid">only">Toggle navigation</span>
        <div<span class="navbarclass="icon-header">bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName<href="#">Simple Stock</a>
    </div>

    </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="<?php <liif class="active"><a(isset($active_productos)){echo href="#">Home<$active_productos;}?>"><a href="stock.php"><i class='glyphicon glyphicon-barcode'></i> Inventario</a></li>
        <li class="<?php <li><aif href="#">Page(isset($active_categoria)){echo 1<$active_categoria;}?>"><a href="categorias.php"><i class='glyphicon glyphicon-tags'></i> Categorías</a></li>
        <li class="<?php <li><aif href="#">Page(isset($active_usuarios)){echo 2<$active_usuarios;}?>"><a href="usuarios.php"><i  class='glyphicon glyphicon-user'></i> Usuarios</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Pagehref="http://obedalvarado.pw/contacto/" 3<target='_blank'><i class='glyphicon glyphicon-envelope'></i> Soporte</a></li>
        <li><a href="login.php?logout"><i class='glyphicon glyphicon-off'></i> Salir</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
    nav.navbar {
        background-color: #ae2822;
    }

    .navbar .navbar-brand {
      color: #f9f7f7;
    }

    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus {
      color: #c91b1b;
    }

    .navbar .navbar-text {
      color: #f9f7f7;
    }

    .navbar .navbar-nav .nav-link {
      color: #f9f7f7;
      border-radius: .25rem;
      margin: 0 0.25em;
    }

    .navbar .navbar-nav .nav-link:not(.disabled):hover,
    .navbar .navbar-nav .nav-link:not(.disabled):focus {
      color: #c91b1b;
    }

    .navbar .navbar-nav .nav-item.active .nav-link,
    .navbar .navbar-nav .nav-item.active .nav-link:hover,
    .navbar .navbar-nav .nav-item.active .nav-link:focus,
    .navbar .navbar-nav .nav-item.show .nav-link,
    .navbar .navbar-nav .nav-item.show .nav-link:hover,
    .navbar .navbar-nav .nav-item.show .nav-link:focus {
      color: #c91b1b;
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle {
      border-color: #f9f9f9;
    }

    .navbar .navbar-toggle:hover,
    .navbar .navbar-toggle:focus {
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle .navbar-toggler-icon {
      color: #f9f7f7;
    }

    .navbar .navbar-collapse,
    .navbar .navbar-form {
      border-color: #f9f7f7;
    }

    .navbar .navbar-link {
      color: #f9f7f7;
    }

    .navbar .navbar-link:hover {
      color: #c91b1b;
    }

    @media (max-width: 575px) {
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 767px) {
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 991px) {
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 1199px) {
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #f9f7f7;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #c91b1b;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #c91b1b;
      background-color: #f9f9f9;
    }


    }
    .thumb-name {
      font-weight: bold;
      display: block;
    }
    .stock-counter {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      right: 21px;
    }
    .badge {
      display: inline-block;
      min-width: 10px;
      padding: 3px 7px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      background-color: #777;
      border-radius: 10px;
    }
    .low-stock-alert {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      left: 21px;
      color: red;
    }
    .item-quantity {
      font-size: 40px;
    }
    .current-stock {
      font-size: 99px;
      font-weight: bold;
    }
    .item-number {
      font-size: 20px;
    }
    .item-title {
      font-size: 23px;
      font-weight: bold;
    }
    .item-price {
      font-size: 23px;
      font-weight: bold;
      color: #388e3c;
    }
    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover {
      z-index: 3;
      color: #fff;
      cursor: default;
      background-color: #3c763d;
      border-color: #ccc;
    }
    a {
      color: #3c763d;
    }
    <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">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>
nav.navbar {
  background-color: #ae2822;
}

.navbar .navbar-brand {
  color: #f9f7f7;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #c91b1b;
}

.navbar .navbar-text {
  color: #f9f7f7;
}

.navbar .navbar-nav .nav-link {
  color: #f9f7f7;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #c91b1b;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #c91b1b;
  background-color: #f9f9f9;
}

.navbar .navbar-toggle {
  border-color: #f9f9f9;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #f9f9f9;
}

.navbar .navbar-toggle .navbar-toggler-icon {
  color: #f9f7f7;
}

.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #f9f7f7;
}

.navbar .navbar-link {
  color: #f9f7f7;
}

.navbar .navbar-link:hover {
  color: #c91b1b;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
    color: #f9f7f7;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
    color: #c91b1b;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
    color: #c91b1b;
    background-color: #f9f9f9;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #f9f7f7;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #c91b1b;
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #c91b1b;
  background-color: #f9f9f9;
}


}
.thumb-name {
  font-weight: bold;
  display: block;
}
.stock-counter {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  right: 21px;
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 10px;
}
.low-stock-alert {
  opacity: 0.8;
  position: absolute;
  margin-top: 5px;
  left: 21px;
  color: red;
}
.item-quantity {
  font-size: 40px;
}
.current-stock {
  font-size: 99px;
  font-weight: bold;
}
.item-number {
  font-size: 20px;
}
.item-title {
  font-size: 23px;
  font-weight: bold;
}
.item-price {
  font-size: 23px;
  font-weight: bold;
  color: #388e3c;
}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #3c763d;
  border-color: #ccc;
}
a {
  color: #3c763d;
}
<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 ">
  <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="#">Simple Stock</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="<?php if (isset($active_productos)){echo $active_productos;}?>"><a href="stock.php"><i class='glyphicon glyphicon-barcode'></i> Inventario</a></li>
        <li class="<?php if (isset($active_categoria)){echo $active_categoria;}?>"><a href="categorias.php"><i class='glyphicon glyphicon-tags'></i> Categorías</a></li>
        <li class="<?php if (isset($active_usuarios)){echo $active_usuarios;}?>"><a href="usuarios.php"><i  class='glyphicon glyphicon-user'></i> Usuarios</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://obedalvarado.pw/contacto/" target='_blank'><i class='glyphicon glyphicon-envelope'></i> Soporte</a></li>
        <li><a href="login.php?logout"><i class='glyphicon glyphicon-off'></i> Salir</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
Origen Enlace
Alvarez
  • 4k
  • 4
  • 18
  • 39

Tu error es que no estas usando muy bien los selectores, te dejo un link donde puedes aprender sobre selectores y como modificar bootstrap

Y continuando con tu pregunta solo cambie la forma la forma en que intentabas llegar al navbar, use esto nav.navbar para acceder a ella.

    nav.navbar {
        background-color: #ae2822;
    }

    .navbar .navbar-brand {
      color: #f9f7f7;
    }

    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus {
      color: #c91b1b;
    }

    .navbar .navbar-text {
      color: #f9f7f7;
    }

    .navbar .navbar-nav .nav-link {
      color: #f9f7f7;
      border-radius: .25rem;
      margin: 0 0.25em;
    }

    .navbar .navbar-nav .nav-link:not(.disabled):hover,
    .navbar .navbar-nav .nav-link:not(.disabled):focus {
      color: #c91b1b;
    }

    .navbar .navbar-nav .nav-item.active .nav-link,
    .navbar .navbar-nav .nav-item.active .nav-link:hover,
    .navbar .navbar-nav .nav-item.active .nav-link:focus,
    .navbar .navbar-nav .nav-item.show .nav-link,
    .navbar .navbar-nav .nav-item.show .nav-link:hover,
    .navbar .navbar-nav .nav-item.show .nav-link:focus {
      color: #c91b1b;
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle {
      border-color: #f9f9f9;
    }

    .navbar .navbar-toggle:hover,
    .navbar .navbar-toggle:focus {
      background-color: #f9f9f9;
    }

    .navbar .navbar-toggle .navbar-toggler-icon {
      color: #f9f7f7;
    }

    .navbar .navbar-collapse,
    .navbar .navbar-form {
      border-color: #f9f7f7;
    }

    .navbar .navbar-link {
      color: #f9f7f7;
    }

    .navbar .navbar-link:hover {
      color: #c91b1b;
    }

    @media (max-width: 575px) {
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 767px) {
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 991px) {
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    @media (max-width: 1199px) {
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item {
        color: #f9f7f7;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:hover,
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item:focus {
        color: #c91b1b;
      }
      .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown- item.active {
        color: #c91b1b;
        background-color: #f9f9f9;
      }
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
      color: #f9f7f7;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
      color: #c91b1b;
    }

    .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
      color: #c91b1b;
      background-color: #f9f9f9;
    }


    }
    .thumb-name {
      font-weight: bold;
      display: block;
    }
    .stock-counter {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      right: 21px;
    }
    .badge {
      display: inline-block;
      min-width: 10px;
      padding: 3px 7px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      background-color: #777;
      border-radius: 10px;
    }
    .low-stock-alert {
      opacity: 0.8;
      position: absolute;
      margin-top: 5px;
      left: 21px;
      color: red;
    }
    .item-quantity {
      font-size: 40px;
    }
    .current-stock {
      font-size: 99px;
      font-weight: bold;
    }
    .item-number {
      font-size: 20px;
    }
    .item-title {
      font-size: 23px;
      font-weight: bold;
    }
    .item-price {
      font-size: 23px;
      font-weight: bold;
      color: #388e3c;
    }
    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover {
      z-index: 3;
      color: #fff;
      cursor: default;
      background-color: #3c763d;
      border-color: #ccc;
    }
    a {
      color: #3c763d;
    }
    <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">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>