0

codigo de navbar.php

#footer{ background-color:#848484; } .navbar-default { background-color: #ed1b2d; border-color: #7a6b6b; } .navbar-default .navbar-brand { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ffffff; } .navbar-default .navbar-text { color: #ffffff; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav
  > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #7a6b6b; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default
  .navbar-nav > .open > a:focus { color: #ffffff; background-color: #7a6b6b; } .navbar-default .navbar-toggle { border-color: #7a6b6b; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #7a6b6b; } .navbar-default
  .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #ffffff; }
  @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff;
  } .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 { color: #ffffff; background-color: #7a6b6b;
  } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<?php
		if (isset($title))
		{
	?>

  <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.7/js/bootstrap.min.js"></script>
  <nav class="navbar navbar-default navbar-fixed-top " role="navigation">
    <div class="container-fluid">
      <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>
		<span class="icon-bar"></span>
	    <span class="icon-bar"></span>
		 </button>
        <a class="navbar-brand">Inventario Swisslub Area TIC</a>
      </div>


      <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>
          <li class="<?php if (isset($active_prestamos)){echo $active_Prestamos;}?>"><a href="prestamos.php"><i class='glyphicon glyphicon-refresh'></i>Prestamos</a></li>
          <li class="<?php if (isset($active_equipos)){echo $active_equipos;}?>"><a href="Asignacion de equipos.php"><i class='glyphicon glyphicon-phone'></i>Asignacion Equipos</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="<?php if (isset($active_equipos)){echo $active_equipos;}?>"><a href="Help desk.php">Help desk<i class='glyphicon glyphicon-question-sign'></i></a></li>
          <li><a href="login.php?logout"><i class='glyphicon glyphicon-off'></i> Salir</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <?php
		}
	?>

5
  • Por favor implementa tu código para saber cual es tu problema y que es lo que quieres... !
    – zerokira
    Commented el 25 sept. 2017 a las 17:40
  • sya lo estoy ingresando pero me toca linea por llinea aplicarle la sangria :) Commented el 25 sept. 2017 a las 17:43
  • Tu problema esta en la variable $active_equipos, la estas llamando tres veces, entonces tres elementos del navbar se marcan como activos
    – Alvarez
    Commented el 26 sept. 2017 a las 15:50
  • si un pequeño error pero eso no es lo que yo quiero es que no me cambia de color cuando le doy click a prestamos y asignacion de equipos Commented el 26 sept. 2017 a las 15:53
  • Por ejemplo en tu pagina prestamos tienes que tener estos campos o algo asi: $active_facturas=""; $active_productos=""; $active_clientes=""; $active_usuarios=""; $active_prestamos="active"; entonces en la paginas que estes tiene que tener active y los demas "";
    – Alvarez
    Commented el 26 sept. 2017 a las 16:01

3 respuestas 3

1

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.

#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>

15
  • no no cambio el el navbar Commented el 25 sept. 2017 a las 19:04
  • No te funciona porque tu css esta definido para el navbar, y en tu html no lo tienes definido asi.
    – Alvarez
    Commented el 25 sept. 2017 a las 19:51
  • Ya esta editada la respuesta.
    – Alvarez
    Commented el 25 sept. 2017 a las 20:12
  • pero igual no funciona Commented el 26 sept. 2017 a las 13:57
  • Como te digo, tu problema es el html. Podrias pasar el link del navbar que quieres implementar?
    – Alvarez
    Commented el 26 sept. 2017 a las 14:16
0

Tal vez te sirva

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

Visit http://librosweb.es/foro/pregunta/513/cambiar-color-y-tipo-de-letra-a-la-barra-de-navegacion-de-bootstrap/

0

Usas mal los selectores. Ten en cuenta que unos selectores tienen preferencia a otros. Por ejemplo si estás apuntando con un selector de etiqueta por ejemplo y cambiando el background, si hay un selector de id como en el ejemplo..los cambios del selector id van por encima de los cambios del selector de etiqueta. Mira mejor esa parte

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.