1

I have a navbar at the top with some dropdown menus. I also have dialogs that pop up (using alertifyjs). I would like the dropdowns to be able to be on top of the dialogs. How can I do that?

I created a JSFiddle to illustrate.

HTML

<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Javascript

$(document).ready(function() {
  alertify.alert('hello').set('modal', false).set('moveBounded', true);
});
mikeazo
  • 389
  • 2
  • 24

1 Answers1

1

You'll need to set a z-index in CSS on the drop-down/navbar to a value higher than what's set on the modal.

nav.navbar-static-top 
{
  z-index: 9999;
}

I checked the Fiddle you posted and the Modal has a z-index set to 1981, so a z-index of 9999 is sufficient to place it above the modal.

Based on your comments about your desired result, unfortunately because of the way the navbar is structured there's no easy way to have the navbar behind the alert but the dropdown be above the alert. So your best bet would be to do what I suggested above where the entire navbar stays on top of the alert, but configure the alert to always clear the navbar.

creanium
  • 647
  • 4
  • 17
  • But then the dialog goes behind the nav. – mikeazo Dec 08 '15 at 15:05
  • @mikeazo You want the navigation bar to be behind the alert, but only the dropdown be in front of the alert? – creanium Dec 08 '15 at 15:26
  • Yes, that is the idea. That way, if an alert is close to the nav bar, but not covering it, the dropdown opens on top of the alert. The other thing I have played with is just making the alert so that it cannot be moved over the nav bar at all. – mikeazo Dec 08 '15 at 16:27
  • The way the navbar is structured, there's no easy way to have the navbar behind the alert but the dropdown be above the alert. So your best bet would be to do what I suggested above where the entire navbar stays on top of the alert, but configure the alert to always clear the navbar. – creanium Dec 08 '15 at 16:52
  • Thank you for confirming that for me. If you add that to your answer, I'll gladly accept it. – mikeazo Dec 08 '15 at 17:53
  • Edit applied, much appreciated. – creanium Dec 08 '15 at 19:42