Cambiar el color de la barra navegación de bootstrap

Responder
Avatar de Usuario
lucho
Moderador
Mensajes: 8
Registrado: Dom Oct 23, 2016 3:31 am

Cambiar el color de la barra navegación de bootstrap

Mensaje por lucho » Jue Nov 03, 2016 1:30 am

Parece algo tonto pero hay muchas personas como yo que comenzamos en el mundo del desarrollo web y a utilizar framework css, pero los colores de las barras de navegación no son del todos llamativos por ello decidir modificar el color de barra de navegación de bootstrap con un simple código css dentro del mismo archivo para no modificar el corel de bootstrap y no afectar todo el framework solamente la barra que es la que necesito que cambie de color les comparto el código para que cada quien modifique los parámetros del css y adapte la barra de navegación al color que les sea de su agrado.

Código: Seleccionar todo

<!-- Aporte para codigohoy.com -->
<style> 
    .navbar-custom {
        background-color:#2196F3;
        color:#ffffff;
        border-radius:0;
    }

    .navbar-custom .navbar-nav > li > a {
        color:#fff;
        padding-left:20px;
        padding-right:20px;
    }
    .navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
        color: #ffffff;
        background-color:transpare;
    }

    .navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #03A9F4; 
    }

    .navbar-custom .navbar-brand {
        color:#eeeeee;
    }
    .navbar-custom .navbar-toggle {
        background-color:#eeeeee
    }
    .navbar-custom .icon-bar {
        background-color:#33aa33;
    }
</style>
<nav class="navbar navbar-custom navbar-static-top">
    <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">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="">Panel</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Buscar">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">4<span class="glyphicon glyphicon-bell" aria-hidden="true"></span><span class="badge"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Reunion activa</a></li>
                        <li><a href="#">Nuevos clientes</a></li>
                        <li><a href="">Cita programada</a></li>
                        <li><a href="">Stock bajo</a></li>
                        <li class="divider"></li>
                        <li><a href="">Nuevo inventario</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Settings<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="">Administracion</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="">Clientes</a></li>
                        <li class="divider"></li>
                        <li><a href="">Tipos de grid</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Lucho<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="">Desarrollo</a></li>
                        <li><a href="">Ingresos</a></li>
                        <li><a href="">Editor</a></li>
                        <li><a href="">Clientes</a></li>
                        <li><a href="">Correo</a></li>
                        <li class="divider"></li>
                        <li><a href="http://codigohoy.com/" target="black">codigohoy.com</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
Redactor por profesión y amante de la tecnología de nacimiento. !gam

Responder
  • Temas similares
    Respuestas
    Vistas
    Último mensaje

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado