How do I customize the color of Bootstrap’s Navbar?

Question

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;

http://www.esperancapaixao.com/

I know the part of the code responsible for navbar this below, but even modifying 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;
} 

Answer 1

You can also in your custom style sheet and put the code followed by !Important; so it will overwrite the default color. This has to be done after the current bootstrap css.

Answer 2

This pq the class in HTML is navbar and in the CSS is navbar-default, so does not apply colors. Remove the default of the navbar classes in the right-working CSS.

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

Answer 3

Unlike in my friend Leandro I would advise you to do otherwise.

Since you already have all the CSS ready it would be easier to pick up the class navbar on that tag and put the -default being like this: <nav class="navbar-default" id="navbar"> Ready she’ll get all your custom CSS.

Look how it turned out, I didn’t have to move a line in your CSS just switched navbar for navbar-default on the 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>