title: Multiple navbar configuration?
body: <p>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.</p>
  
  <p>This is the css file.</p>
  
  <p>The first Navbar</p>
  
  <pre><code>.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 &gt; li &gt; a {
    color: #fdfdff;
  }
  .navbar-default .navbar-nav &gt; li &gt; a:hover, .navbar-default .navbar-nav &gt; li &gt; a:focus {
    color: #029fe5;
  }
  .navbar-default .navbar-nav &gt; li &gt; .dropdown-menu {
    background-color: #022436;
  }
  .navbar-default .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; a {
    color: #fdfdff;
  }
  .navbar-default .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; a:focus {
    color: #029fe5;
    background-color: #2b4156;
  }
  .navbar-default .navbar-nav &gt; li &gt; .dropdown-menu &gt; li &gt; .divider {
    background-color: #022436;
  }
  .navbar-default .navbar-nav &gt; .active &gt; a, .navbar-default .navbar-nav &gt; .active &gt; a:hover, .navbar-default .navbar-nav &gt; .active &gt; a:focus {
    color: #029fe5;
    background-color: #2b4156;
  }
  .navbar-default .navbar-nav &gt; .open &gt; a, .navbar-default .navbar-nav &gt; .open &gt; a:hover, .navbar-default .navbar-nav &gt; .open &gt; 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 &gt; li &gt; a {
      color: #fdfdff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu &gt; li &gt; a:hover, .navbar-default .navbar-nav .open .dropdown-menu &gt; li &gt; a:focus {
      color: #029fe5;
    }
    .navbar-default .navbar-nav .open .dropdown-menu &gt; .active &gt; a, .navbar-default .navbar-nav .open .dropdown-menu &gt; .active &gt; a:hover, .navbar-default .navbar-nav .open .dropdown-menu &gt; .active &gt; a:focus {
      color: #029fe5;
      background-color: #2b4156;
    }
  }
  </code></pre>
  
  <p>This is code is for the login css code</p>
  
  <pre><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;
      }
  }
  </code></pre>
  
  <p>This is the 2nd navbar (drops over the 1st navabar when a button is cilcked)</p>
  
  <pre><code>.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 &gt; 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&gt;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 &gt; 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&gt;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);
      }
  }
  </code></pre>
  
  <p>If I anyone can explain how do i separate them using names or numbers, that would be appreciated.</p>
  
  <p>This are the navbars both are included in the header tags</p>
  
  <p>
           
              </p>
  
  <pre><code>      &lt;div class="navbar-header"&gt;
  
              &lt;a class="navbar-brand" href="#/"&gt;Web Name&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav navbar-left"&gt;
                  &lt;li&gt;&lt;a href="#/"&gt;&lt;span class="glyphicon glyphicon-home"&gt; Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#/about"&gt;&lt;span class="glyphicon glyphicon-star"&gt; About us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#/contact"&gt;&lt;span class="glyphicon glyphicon-phone-alt"&gt; Contact us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1"&gt;Categories&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1"&gt; &lt;!--The 2nd Navbar--&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;!--&lt;/div&gt;--&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#/signup"&gt;&lt;span class="glyphicon glyphicon-user"&gt; Sign up&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Log-in &lt;b class="caret" style="color:white"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul id="login-dp" class="dropdown-menu"&gt;
                          &lt;li&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-md-12"&gt;
                                      Login via,
  
                                      &lt;div class="social-buttons"&gt;
                                          &lt;a href="#" class="btn btn-fb"&gt;&lt;i class="fa fa-facebook"&gt; Facebook&lt;/i&gt;&lt;/a&gt;
                                          &lt;a href="#" class="btn btn-tw"&gt;&lt;i class="fa fa-twitter"&gt; Twitter&lt;/i&gt;&lt;/a&gt;
                                      &lt;/div&gt;
  
                                      or
  
                                      &lt;form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="sr-only" for="inputEmail"&gt;E-mail&lt;/label&gt;
                                              &lt;input type="email" class="form-control" id="inputEmail" placeholder="E-mail address" required /&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="sr-only" for="inputPassword"&gt;Password&lt;/label&gt;
                                              &lt;input type="password" class="form-control" id="inputPassword" placeholder="Password" required /&gt;
                                              &lt;div class="help-block text-right"&gt;&lt;a href="#"&gt;Forgot password?&lt;/a&gt;&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;button type="submit" class="btn btn-primary btn-block"&gt; Sign in &lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;div class="checkbox"&gt;
                                              &lt;label&gt;
                                                  &lt;input type="checkbox" /&gt; Keep me logged-in
                                              &lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>