CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapanimation
darnen
darnen

Reputation: 31

animated burger icons for Multiple Bootstrap navbars

I started with 1 navbar that on click would animate the burger icon to an 'x'. I added an additional navbar with another burger but now the animation no longer works on either. In order to have multiple navbars on one page you need to change the data-target from #navbar to something else, but once i did this I lost my animation. Any ideas?

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

For the sake of space, the second nav is the same thing just with ".secondarynav' as the data-target. And the css is:

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

Upvotes: 0

Views: 2577

Answers (2)

partypete25
partypete25

Reputation: 4413

I was able to get it working by changing the 'data-target' of the button to that of the id of the nav, and not the class '.mainnav'.

data-target="#navbar"

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

Once i did that it worked. so i renamed it to navbar-1, and duplicated it to create the second, naming it navbar-2.

Upvotes: 1

Peter Girnus
Peter Girnus

Reputation: 2739

Fixed for you and made it simpler to manage :)

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

Upvotes: 0

Related Questions