Adsense

sábado, 5 de julio de 2014

Cambiar los colores de la navbar de Bootstrap

Para cambiar los colores y estilos principales de la navbar de bootstrap debes editar las siguientes clases. Yo en mi caso creé un css adicional (custom.css) en el cual hice mis respectivas modificaciones.

 /* navbar */  
 .navbar-default {  
   background-color: #4FE2A0;  
   border-color: #E7E7E7;  
 }  
 /* title */  
 .navbar-default .navbar-brand {  
   color: #FFF;  
 }  
 .navbar-default .navbar-brand:hover,  
 .navbar-default .navbar-brand:focus {  
   color: #5E5E5E;  
 }  
 /* link */  
 .navbar-default .navbar-nav > li > a {  
   color: #FFF;  
 }  
 .navbar-default .navbar-nav > li > a:hover,  
 .navbar-default .navbar-nav > li > a:focus {  
   color: #333;  
 }  
 .navbar-default .navbar-nav > .active > a,   
 .navbar-default .navbar-nav > .active > a:hover,   
 .navbar-default .navbar-nav > .active > a:focus {  
   color: #555;  
   background-color: #E7E7E7;  
 }  
 .navbar-default .navbar-nav > .open > a,   
 .navbar-default .navbar-nav > .open > a:hover,   
 .navbar-default .navbar-nav > .open > a:focus {  
   color: #555;  
   background-color: #1A9E62;  
 }  
 /* caret */  
 .navbar-default .navbar-nav > .dropdown > a .caret {  
   border-top-color: #777;  
   border-bottom-color: #777;  
 }  
 .navbar-default .navbar-nav > .dropdown > a:hover .caret,  
 .navbar-default .navbar-nav > .dropdown > a:focus .caret {  
   border-top-color: #333;  
   border-bottom-color: #333;  
 }  
 .navbar-default .navbar-nav > .open > a .caret,   
 .navbar-default .navbar-nav > .open > a:hover .caret,   
 .navbar-default .navbar-nav > .open > a:focus .caret {  
   border-top-color: #555;  
   border-bottom-color: #555;  
 }  
 /* mobile version */  
 .navbar-default .navbar-toggle {  
   border-color: #DDD;  
 }  
 .navbar-default .navbar-toggle:hover,  
 .navbar-default .navbar-toggle:focus {  
   background-color: #DDD;  
 }  
 .navbar-default .navbar-toggle .icon-bar {  
   background-color: #CCC;  
 }  
 @media (max-width: 767px) {  
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {  
     color: #777;  
   }  
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,  
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {  
     color: #333;  
   }  
 }  

No hay comentarios: