Cambiar de color el NAVBAR en tu sitio web.
El proceso es muy simple, basta con seleccionar el color y tipo que mas te agrada y el codigo CSS se genera en automatico, despues solo necesitas pegar el codigo a tu sistema o pagina web y listo
El siguiente video muestra mas detalles
Para este proceso solo necesitas visitar lo siguiente:
- Ve a http://work.smarchal.com/twbscolor/css
- Elige la combinación de colores que mas te guste
- Copia el código generado
- Pegalo en tu website
- listo.
Ejemplo del codigo css para Navbar
![Cambiar de color el NAVBAR en tu sitio web. 1 Cambiar de color mi NAVBAR](https://angellomix.com/wp-content/uploads/2016/10/Cambiar-de-color-mi-NAVBAR.png)
css
.navbar { background-color: #4432e3; } .navbar .navbar-brand { color: #ecf0f1; } .navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: #ecdbff; } .navbar .navbar-text { color: #ecf0f1; } .navbar .navbar-text a { color: #ecdbff; } .navbar .navbar-text a:hover, .navbar .navbar-text a:focus { color: #ecdbff; } .navbar .navbar-nav .nav-link { color: #ecf0f1; border-radius: .25rem; margin: 0 0.25em; } .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus { color: #ecdbff; } .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: #ecdbff; background-color: #19161a; } .navbar .navbar-toggle { border-color: #19161a; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background-color: #19161a; } .navbar .navbar-toggle .navbar-toggler-icon { color: #ecf0f1; } .navbar .navbar-collapse, .navbar .navbar-form { border-color: #ecf0f1; } .navbar .navbar-link { color: #ecf0f1; } .navbar .navbar-link:hover { color: #ecdbff; } @media (max-width: 575px) { .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #19161a; } } @media (max-width: 767px) { .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #19161a; } } @media (max-width: 991px) { .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #19161a; } } @media (max-width: 1199px) { .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #19161a; } } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #19161a; }
Preguntas? comenta estoy para ayudarte.
Cambiar de color el NAVBAR en tu sitio web.