title: Dropdown Menu going under fixed nav bar
body: <p>I want the menu to go over the nav bar as on mobile, they tend to be a little large for the viewport.  I have tried to make the position on <code>.dropdown-menu</code> <code>relative</code> and <code>absolute</code> with no success on either and set the <code>z-index: 999</code> and no success.  Any advice would be greatly appreciated.  Its annoying me to high heaven. <a href="https://i.stack.imgur.com/irYPx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/irYPx.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"&gt;
      &lt;a class="navbar-brand active" href="https://www.inplaydesign.com/index.html"&gt;d|b&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="https://blog.inplaydesign.com"&gt;blog&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/gallery/gallery.html"&gt;gallery&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="https://shop.inplaydesign.com"&gt;shop&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/faq/faq.html"&gt;f.a.q.&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/contact/contact.html"&gt;contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;li&gt;
          &lt;button type="button" class="btn btn-outline-dark btn-sml" data-target="#logOut"&gt;
                          &lt;i class="fa fa-power-off"&gt;&lt;/i&gt; log-out&lt;/button&gt;
        &lt;/li&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;div class="container carousel-container"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on("load", function() {
    $('.carousel-container').each(function() {
      var $carouselContainer = $(this);
      var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
        var targetSlide = $carousel.find('.active').index();
        var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
        $carouselContainer.find('.carousel-text').html(targetContent);
      }).carousel({
        interval: false
      });
      $carouselContainer.find('.carousel-selector').on('click', function() {
        var targetSlide = $(this).data('slide');
        $carousel.carousel(targetSlide);
      });
      // The carousel is already at first slide (slide 0).
      var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
      if (n &lt; 2 || $carouselContainer.closest(".modal").length &gt; 0) { // if there are less than 2 slides, or the carousel is in a .modal container 
        // Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
        $carousel.trigger('slid.bs.carousel');
      } else { // ... else, there are 2 or more slides and this is a non-modal carousel: 
        // send to last slide
        $carousel.carousel(n - 1);
        // `slid.bs.carousel` event will be triggered automatically and its handler will look after the .carousel-text.
        $carousel.trigger('slid.bs.carousel');
      }
    });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    z-index: 1;
  }
  
  button .dropdown-menu {
    margin-top: 75px;
    position: fixed;
    z-index: 9999;
  }
  
  .container1 {
    position: fixed;
    left: 50%;
    transform: translate(-51.5%);
    z-index: 999;
    background-color: black;
  }
  
  #container2 {
    margin-top: 70px;
  }
  
  #thumbnail-view {
    transform: translateY(500px);
    padding-bottom: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;div class="container"&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"&gt;
      &lt;a class="navbar-brand active" href="https://www.inplaydesign.com/index.html"&gt;d|b&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="https://blog.inplaydesign.com"&gt;blog&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/gallery/gallery.html"&gt;gallery&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="https://shop.inplaydesign.com"&gt;shop&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/faq/faq.html"&gt;f.a.q.&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/contact/contact.html"&gt;contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;li&gt;
          &lt;button type="button" class="btn btn-outline-dark btn-sml" data-target="#logOut"&gt;
                          &lt;i class="fa fa-power-off"&gt;&lt;/i&gt; log-out&lt;/button&gt;
        &lt;/li&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;div class="container carousel-container"&gt;
    &lt;div class="container container1" id="container2"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-8 col-md-8 col-sm-12"&gt;
          &lt;div class="carousel slide carousel-fade" id="carousel-0"&gt;
            &lt;!-- Carousel items --&gt;
            &lt;div class="carousel-inner"&gt;
  
              &lt;div class="active carousel-item" data-slide-number="0"&gt;
                &lt;img class="img-thumbnail" height="450" width="720" height="450" width="720" src="http://via.placeholder.com/720x450"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col align-self-center carousel-text"&gt;&lt;/div&gt;
        &lt;div style="display: none;"&gt;
          &lt;div class="slide-content" data-slide="0"&gt;
            &lt;h2&gt;Skygate (Night)&lt;/h2&gt;
            &lt;a href="../downloads/Facebook/skygatenight1fbt.jpg" download&gt;
              &lt;button class="btn btn-outline-dark btn-sm" type="button" style="margin-left: -1px;"&gt;Facebook Cover&lt;/button&gt;
            &lt;/a&gt;
            &lt;div class="btn-group"&gt;
              &lt;div class="btn-group btn-group-sm"&gt;
                &lt;button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown"&gt;Desktop&lt;/button&gt;
                &lt;div class="dropdown-menu" role="menu"&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/1024x768" download&gt;1024 x 768 (4:3)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/1600x1200" download&gt;1600 x 1200 (4:3)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/1280x1024" download&gt;1280 x 1024 (5:4)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/1366x768" download&gt;1366 x 768 (16:9)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/1920x1080" download&gt;1920 x 1080 (16:9)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/1680x1050" download&gt;1680 x 1050 (16:10)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/1920x1200" download&gt;1920 x 1200 (16:10)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/2560x1600" download&gt;2560 x 1600 (16:10)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/2880x1800" download&gt;2880 x 1800 (16:10)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/3840x2160" download&gt;3840 x 2160 (UHD 16:9)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/4096x2304" download&gt;4096 x 2304 (4K 16:9)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Desktop/5120x2880" download&gt;5120 x 2880 (5K 16:9)&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="btn-group btn-group-sm"&gt;
                &lt;button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown"&gt;Mobile&lt;/button&gt;
                &lt;div class="dropdown-menu" role="menu"&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/iPhone5" download&gt;640 x 1136 (iphone 5)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/iPhone6" download&gt;750 x 1344 (iphone 6/7)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/iPhone6+" download&gt;1920 x 1920 (iphone 6+/7+)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/HTC" download&gt;1080 x 1920 (S4, HTC One)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/iPad" download&gt;1024 x 1024 (iPad 1&amp;2/Mini)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/Surface3" download&gt;2160 x 1440 (Surface 3)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/Retina" download&gt;2048 x 2048 (Retina iPad/Mini)&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Mobile/GalaxyS6" download&gt;2560 x 2560 (Galaxy S6)&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="btn-group btn-group-sm"&gt;
                &lt;button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown"&gt;Dual&lt;/button&gt;
                &lt;div class="dropdown-menu" role="menu"&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/2560x1024" download&gt;2560 x 1024&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/3840x1080" download&gt;3840 x 1080&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/3360x1050" download&gt;3360 x 1050&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/3840x1200" download&gt;3840 x 1200&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/5120x1600" download&gt;5120 x 1600&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/8192x2304" download&gt;8192 x 2304&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/7680x2160" download&gt;7680 x 2160&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Dual/10240x2880" download&gt;10240 x 2880&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="btn-group btn-group-sm"&gt;
                &lt;button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown"&gt;Triple&lt;/button&gt;
                &lt;div class="dropdown-menu" role="menu"&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/3840x1024" download&gt;3840 x 1024&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/5760x1080" download&gt;5760 x 1080&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/5040x1050" download&gt;5040 x 1050&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/5760x1200" download&gt;5760 x 1200&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/7680x1600" download&gt;7680 x 1600&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/12280x2304" download&gt;11520 x 2160&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/12280x2304" download&gt;12288 x 2304&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/Triple/15360x2880" download&gt;15360 x 2880&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="btn-group btn-group-sm"&gt;
                &lt;button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown"&gt;
                                      &lt;i class="fa fa-apple" aria-hidden="true"&gt;&lt;/i&gt;
                                  &lt;/button&gt;
                &lt;div class="dropdown-menu" role="menu"&gt;
                  &lt;h6 class="dropdown-header"&gt;Dual Screen&lt;/h6&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/2560x1024" download&gt;2560 x 1024&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/3840x1080" download&gt;3840 x 1080&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/3360x1050" download&gt;3360 x 1050&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/3840x1200" download&gt;3840 x 1200&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/5120x1600" download&gt;5120 x 1600&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/8192x2304" download&gt;8192 x 2304&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/7680x2160" download&gt;7680 x 2160&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/dual/10240x2880" download&gt;10240 x 2880&lt;/a&gt;
                  &lt;h6 class="dropdown-header"&gt;Triple Screen&lt;/h6&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/3840x1024" download&gt;3840 x 1024&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/5760x1080" download&gt;5760 x 1080&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/5040x1050" download&gt;5040 x 1050&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/5760x1200" download&gt;5760 x 1200&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/7680x1600" download&gt;7680 x 1600&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/12280x2304" download&gt;11520 x 2160&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/12280x2304" download&gt;12288 x 2304&lt;/a&gt;
                  &lt;a class="dropdown-item" href="../downloads/macOS/triple/15360x2880" download&gt;15360 x 2880&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container animated fadeIn" id="thumbnail-view" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid-item"&gt;
          &lt;a class="hexLink carousel-selector" data-slide="0"&gt;
            &lt;img width="150" height="97.5" class="img-thumbnail" src="http://via.placeholder.com/150x97"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>