Multiple navbar configuration? - html

Question

I'm new to css and i'm doing a simple project, I have put 2 navbars in my website. First navbar is the default one. The second one passes on top of that when I click a button in the 1st navbar. Due to poor configuration of the css file I have overridden the below one. Some links are not working (login link). How do I separate them. I used two examples to do this.
This is the css file.
The first Navbar
.navbar-default {
background-color: #022436;
border-color: #2b4156;
}
.navbar-default .navbar-brand {
color: #fdfdff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #029fe5;
}
.navbar-default .navbar-text {
color: #fdfdff;
}
.navbar-default .navbar-nav > li > a {
color: #fdfdff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #029fe5;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #022436;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #fdfdff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #029fe5;
background-color: #2b4156;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #022436;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #029fe5;
background-color: #2b4156;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #029fe5;
background-color: #2b4156;
}
.navbar-default .navbar-toggle {
border-color: #2b4156;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #2b4156;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fdfdff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #fdfdff;
}
.navbar-default .navbar-link {
color: #fdfdff;
}
.navbar-default .navbar-link:hover {
color: #029fe5;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #fdfdff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #029fe5;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #029fe5;
background-color: #2b4156;
}
}
This is code is for the login css code
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc;
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
This is the 2nd navbar (drops over the 1st navabar when a button is cilcked)
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-left .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }
.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 100px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0px; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 50%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: left; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-nav.navbar-left .btn:not(.collapsed) {
background-color: rgb(111, 84, 153);
border-color: rgb(111, 84, 153);
color: rgb(255, 255, 255);
}
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
height: auto !important;
transition: transform 0.3s;
transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
#media screen and (max-width: 767px) {
.navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 15px; padding-right: 15px; }
.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
transform: translate(-100%,0px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
.navbar.navbar-default .nav-collapse.slide-down,
.navbar.navbar-inverse .nav-collapse.slide-down {
transform: translate(0px,-100%);
}
.navbar.navbar-default .nav-collapse.in.slide-down,
.navbar.navbar-inverse .nav-collapse.in.slide-down {
transform: translate(0px,0px);
}
}
If I anyone can explain how do i separate them using names or numbers, that would be appreciated.
This are the navbars both are included in the header tags
<div class="navbar-header">
<a class="navbar-brand" href="#/">Web Name</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><span class="glyphicon glyphicon-home"> Home</span></li>
<li><span class="glyphicon glyphicon-star"> About us</span></li>
<li><span class="glyphicon glyphicon-phone-alt"> Contact us</span></li>
<li><a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a></li>
</ul>
<ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1"> <!--The 2nd Navbar-->
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
<li>Action 4</li>
</ul>
<!--</div>-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"> Sign up</span></li>
<li class="dropdown">
<span class="glyphicon glyphicon-log-in"></span> Log-in <b class="caret" style="color:white"></b>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via,
<div class="social-buttons">
<i class="fa fa-facebook"> Facebook</i>
<i class="fa fa-twitter"> Twitter</i>
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="inputEmail">E-mail</label>
<input type="email" class="form-control" id="inputEmail" placeholder="E-mail address" required />
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required />
<div class="help-block text-right">Forgot password?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Sign in </button>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Keep me logged-in
</label>
</div>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

Not really sure you meant 2nd navbar or a dropdown menu within the navbar. The way you build your navbar I'm assuming you want one navbar and a dropdown within that navbar.
Here's a working version http://plnkr.co/edit/EDogb0HQhRzqOlaLng7J
Hope this is what you're trying to achieve.
There are several things that are missing from your code.
I've added the button menu for mobile collapse all.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
You want to insert the 2nd inside the first to create the dropdown.
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/">
<span class="glyphicon glyphicon-home"> Home</span>
</a>
</li>
<li>
<a href="#/about">
<span class="glyphicon glyphicon-star"> About us</span>
</a>
</li>
<li>
<a href="#/contact">
<span class="glyphicon glyphicon-phone-alt"> Contact us</span>
</a>
</li>
<li class="dropdown">
<a class="btn btn-default btn-outline btn-circle dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Categories</a>
<ul class="dropdown-menu" id="nav-collapse2">
<!--The 2nd Navbar-->
<li>
Action 1
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li>
Action 4
</li>
</ul>
</li>
</ul>