Animate.css trouble with z-index

Question

I'm using the animate.css framework to handle cool animations for the web application I'm building, but I'm having z-index issues when it comes to displaying my content. (I should also note that I'm using the Twitter Bootstrap framework as well.)

As an example, if I have a menu, and then a panel that displays right below it, the drop downs of the menu will be displayed behind the panel, when in reality, I want them to display in front. Here is a basic JSFiddle example of the problem I'm having.

Here is the HTML of that example.

<div class="container">
<div class="animated fadeInLeft">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 1<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Element 1</a></li>
                <li><a href="#">Element 2</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 2 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Element 1</a></li>
                <li><a href="#">Element 2</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</div>


<div class="animated fadeInLeft">
    <div class="panel panel-primary">
        <div class="panel panel-header">
            My Panel
        </div>
    </div>
</div>

I'm applying the "animated" class to both the panel and menu separately (on purpose because in my application, the menu will be loaded in once, while a different panel could be loaded in), but when I remove the class from one of them, it works perfectly. In other words, if ONLY one of the elements have the "animated" class, it works. If they both have the "animated" class, it doesn't.

Does anyone have an idea on how I could fix this?

Thanks.

Are you talking about when you click the menu icon? I'm seeing the panel pushed down by the menu not going behind it. — apaul, Jun 08 '15 at 01:20
Are you viewing the JSFiddle on a small device? If so, then the menu scales, and the problem doesn't occur. If you view the JSFiddle on a large device, it should then occur. — Garrett, Jun 08 '15 at 01:21

score 2 · Accepted Answer · edited May 23 '17 at 12:30

Remove the unnecessary divs and attach the animation classes directly to the elements themselves. Then you can set the z-index as desired.

I suspect your problem may have been caused by the opacity change in the animation, but I'm not too sure about that.

Working Example

.panel {
    z-index: 1
}
nav {
    z-index:2
}


<div class="container">
    <nav class="navbar navbar-default animated fadeInLeft"> <!-- see change -->
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>

                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 1<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Element 1</a>

                            </li>
                            <li><a href="#">Element 2</a>

                            </li>
                        </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 2 <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Element 1</a>

                            </li>
                            <li><a href="#">Element 2</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="panel panel-primary animated fadeInLeft"> <!-- see change -->
        <div class="panel panel-header">My Panel</div>
    </div>
</div>

Animate.css trouble with z-index

1 Answers1