анимированные иконки для гамбургеров для нескольких бутстрапов navbars

Question

Я начал с 1 navbar, чтобы щелкнуть мышью значок гамбургера до «x». Я добавил дополнительный навигатор с другим гамбургером, но теперь анимация больше не работает. Чтобы иметь несколько навигаторов на одной странице, вам нужно изменить цель данных с #navbar на что-то еще, но как только я это сделал, я потерял анимацию. Есть идеи?

<nav class="navbar white navbar-default"> 
     <div class="logo"></div> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mainnav" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar top-bar"></span> 
      <span class="icon-bar middle-bar"></span> 
      <span class="icon-bar bottom-bar"></span> 
     </button> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse mainnav"> 
      <ul class="nav navbar-nav"> 
       <li><a class="scroller" href="#proj-head">projects</a></li> 
       <li><a href="#section3">studio</a></li> 
       <li><a href="#section4">press</a></li> 
       <li><a href="#section6">Contact</a></li> 
       <li><a href="https://www.linkedin.com/profile/view?id=192958931"><i class="fa fa-linkedin"></i></a></li>   
       <li><a href="http://instagram.com/STUDIOSC_NYC"><i class="fa fa-instagram"></i></a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
     </nav> 

Ради пространства, второй нав это то же самое, только с».secondarynav» в качестве данных-мишени И КСС:.

.navbar-toggle .icon-bar { 
    width: 22px; 
    transition: all 0.2s; 
    -webkit-transition: all 0.2s; 
} 
.navbar-default .navbar-toggle {position:relative; padding-top:20px; z-index:100} 
.navbar-toggle .top-bar { 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform-origin: 10% 10%; 
    -webkit-transform-origin: 10% 10%; 
} 
.navbar-toggle .middle-bar { 
    opacity: 0; 
} 
.navbar-toggle .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
    -webkit-transform: rotate(-45deg); 
    -webkit-transform-origin: 10% 90%; 
} 
.navbar-toggle.collapsed .top-bar { 
    transform: rotate(0); 
    -webkit-transform: rotate(0); 
} 
.navbar-toggle.collapsed .middle-bar { 
    opacity: 1; 
} 
.navbar-toggle.collapsed .bottom-bar { 
    transform: rotate(0); 
    -webkit-transform: rotate(0); 
} 

Answer 1

Я был в состоянии получить его работу, изменяя «данных-мишень» кнопки, что и идентификатором нав, а не класс '.mainnav'.

data-target="#navbar" 

https://jsfiddle.net/partypete25/vc3sw8r5/3/

После того, как я сделал, чтобы он работал. поэтому я переименовал его в navbar-1 и продублировал его для создания второго, называя его navbar-2.

Answer 2

Fixed для вас и сделал проще управлять :)

HTML:

<nav class="navbar white navbar-default"> 
     <div class="logo"></div> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mainnav" aria-expanded="false" aria-controls="navbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse mainnav"> 
      <ul class="nav navbar-nav"> 
       <li><a class="scroller" href="#proj-head">projects</a></li> 
       <li><a href="#section3">studio</a></li> 
       <li><a href="#section4">press</a></li> 
       <li><a href="#section6">Contact</a></li> 
       <li><a href="https://www.linkedin.com/profile/view?id=192958931"><i class="fa fa-linkedin"></i></a></li>   
       <li><a href="http://instagram.com/STUDIOSC_NYC"><i class="fa fa-instagram"></i></a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
     </nav> 

CSS:

.navbar-toggle .icon-bar:nth-of-type(2) { 
     top: 1px; 
} 

.navbar-toggle .icon-bar:nth-of-type(3) { 
    top: 2px; 
} 

.navbar-toggle .icon-bar { 
     position: relative; 
     transition: all 500ms ease-in-out; 
} 

.navbar-toggle.active .icon-bar:nth-of-type(1) { 
     top: 6px; 
     transform: rotate(45deg); 
} 

.navbar-toggle.active .icon-bar:nth-of-type(2) { 
     background-color: transparent; 
} 

.navbar-toggle.active .icon-bar:nth-of-type(3) { 
     top: -6px; 
     transform: rotate(-45deg); 
} 

JS:

$(document).ready(function() { 
       $(".navbar-toggle").on("click", function() { 
        $(this).toggleClass("active"); 
       }); 
     }); 

CODEPEN DEMO