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;
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;
}