How do I customize the color of Bootstrap Navbar?

Question

How do I customize the color of Bootstrap Navbar?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Note the following code;

 <nav class="navbar" id="navbar">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#banner">DEVCON</a>
                    </div>
                    <div class="collapse navbar-collapse" id="nav-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#sobre">Sobre</a></li>
                            <li><a href="#agenda">Agenda</a></li>
                            <li><a href="#palestrantes">Palestrantes</a></li>
                            <li><a href="#local">Como Chegar</a></li>
                            <li><a href="">Contato</a></li>
                        </ul>
                    </div>
                </div>
    </nav>

I'm trying to copy a menu similar to the one below;

link

I know the part of the code responsible for navbar that below, but even modifying I can not, I need help?

.navbar-default {
    background-color: #1ea2ca;
    border-color: #09bef5;
}
.navbar-default .navbar-brand {
    color: #8a0000;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #00fff5;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #2d89a5;
}
.navbar-default .navbar-toggle {
    border-color: #1886a7;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #d4f5ff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #2d89a5;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #2d89a5;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #00fff5;
}

css3 twitter-bootstrap

asked by anonymous 09.05.2018 / 18:33

2 answers

Contact form 7 Do not send attachment Uncaught TypeError: Can not read property 'match' of undefined

score 0 · Answer 1

This is because the HTML class is navbar and CSS is navbar-default, so it does not apply colors. Remove the default of the navbar classes in the CSS that works right.

.navbar {
    background-color: #1ea2ca;
    border-color: #09bef5;
}
.navbar .navbar-brand {
    color: #DC1D1D;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #00fff5;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #2d89a5;
}
.navbar-default .navbar-toggle {
    border-color: #1886a7;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #d4f5ff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #2d89a5;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #2d89a5;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #00fff5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar" id="navbar">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#banner">DEVCON</a>
                    </div>
                    <div class="collapse navbar-collapse" id="nav-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#sobre">Sobre</a></li>
                            <li><a href="#agenda">Agenda</a></li>
                            <li><a href="#palestrantes">Palestrantes</a></li>
                            <li><a href="#local">Como Chegar</a></li>
                            <li><a href="">Contato</a></li>
                        </ul>
                    </div>
                </div>
    </nav>

score 0 · Answer 2

On my friend Leandro, on the contrary, I would advise you to do the opposite.

Since you already have CSS all ready, it would be easier to get the class navbar in this tag and put the -default , like this: <nav class="navbar-default" id="navbar"> Ready it will already take all your Custom CSS.

See how it got, I did not have to move a line in your CSS, I only changed navbar by navbar-default in tag nav

.navbar-default {
    background-color: #1ea2ca;
    border-color: #09bef5;
}
.navbar-default .navbar-brand {
    color: #8a0000;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #00fff5;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #2d89a5;
}
.navbar-default .navbar-toggle {
    border-color: #1886a7;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #d4f5ff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #2d89a5;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #2d89a5;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #00fff5;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/>
<nav class="navbar-default" id="navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#banner">DEVCON</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-menu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#agenda">Agenda</a></li>
                <li><a href="#palestrantes">Palestrantes</a></li>
                <li><a href="#local">Como Chegar</a></li>
                <li><a href="">Contato</a></li>
            </ul>
        </div>
    </div>
</nav>