Dropdown Menu going under fixed nav bar - html

Question

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 .dropdown-menu relative and absolute with no success on either and set the z-index: 999 and no success. Any advice would be greatly appreciated. Its annoying me to high heaven.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand active" href="https://www.inplaydesign.com/index.html">d|b</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://blog.inplaydesign.com">blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/gallery/gallery.html">gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.inplaydesign.com">shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq/faq.html">f.a.q.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact/contact.html">contact</a>
</li>
</ul>
<li>
<button type="button" class="btn btn-outline-dark btn-sml" data-target="#logOut">
<i class="fa fa-power-off"></i> log-out</button>
</li>
</div>
</nav>
</div>
<div class="container carousel-container">
</div>
$(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 < 2 || $carouselContainer.closest(".modal").length > 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');
}
});
})
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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand active" href="https://www.inplaydesign.com/index.html">d|b</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://blog.inplaydesign.com">blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/gallery/gallery.html">gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://shop.inplaydesign.com">shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq/faq.html">f.a.q.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact/contact.html">contact</a>
</li>
</ul>
<li>
<button type="button" class="btn btn-outline-dark btn-sml" data-target="#logOut">
<i class="fa fa-power-off"></i> log-out</button>
</li>
</div>
</nav>
</div>
<div class="container carousel-container">
<div class="container container1" id="container2">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="carousel slide carousel-fade" id="carousel-0">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img class="img-thumbnail" height="450" width="720" height="450" width="720" src="http://via.placeholder.com/720x450">
</div>
</div>
</div>
</div>
<div class="col align-self-center carousel-text"></div>
<div style="display: none;">
<div class="slide-content" data-slide="0">
<h2>Skygate (Night)</h2>
<a href="../downloads/Facebook/skygatenight1fbt.jpg" download>
<button class="btn btn-outline-dark btn-sm" type="button" style="margin-left: -1px;">Facebook Cover</button>
</a>
<div class="btn-group">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="../downloads/Desktop/1024x768" download>1024 x 768 (4:3)</a>
<a class="dropdown-item" href="../downloads/Desktop/1600x1200" download>1600 x 1200 (4:3)</a>
<a class="dropdown-item" href="../downloads/Desktop/1280x1024" download>1280 x 1024 (5:4)</a>
<a class="dropdown-item" href="../downloads/Desktop/1366x768" download>1366 x 768 (16:9)</a>
<a class="dropdown-item" href="../downloads/Desktop/1920x1080" download>1920 x 1080 (16:9)</a>
<a class="dropdown-item" href="../downloads/Desktop/1680x1050" download>1680 x 1050 (16:10)</a>
<a class="dropdown-item" href="../downloads/Desktop/1920x1200" download>1920 x 1200 (16:10)</a>
<a class="dropdown-item" href="../downloads/Desktop/2560x1600" download>2560 x 1600 (16:10)</a>
<a class="dropdown-item" href="../downloads/Desktop/2880x1800" download>2880 x 1800 (16:10)</a>
<a class="dropdown-item" href="../downloads/Desktop/3840x2160" download>3840 x 2160 (UHD 16:9)</a>
<a class="dropdown-item" href="../downloads/Desktop/4096x2304" download>4096 x 2304 (4K 16:9)</a>
<a class="dropdown-item" href="../downloads/Desktop/5120x2880" download>5120 x 2880 (5K 16:9)</a>
</div>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Mobile</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="../downloads/Mobile/iPhone5" download>640 x 1136 (iphone 5)</a>
<a class="dropdown-item" href="../downloads/Mobile/iPhone6" download>750 x 1344 (iphone 6/7)</a>
<a class="dropdown-item" href="../downloads/Mobile/iPhone6+" download>1920 x 1920 (iphone 6+/7+)</a>
<a class="dropdown-item" href="../downloads/Mobile/HTC" download>1080 x 1920 (S4, HTC One)</a>
<a class="dropdown-item" href="../downloads/Mobile/iPad" download>1024 x 1024 (iPad 1&2/Mini)</a>
<a class="dropdown-item" href="../downloads/Mobile/Surface3" download>2160 x 1440 (Surface 3)</a>
<a class="dropdown-item" href="../downloads/Mobile/Retina" download>2048 x 2048 (Retina iPad/Mini)</a>
<a class="dropdown-item" href="../downloads/Mobile/GalaxyS6" download>2560 x 2560 (Galaxy S6)</a>
</div>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="../downloads/Dual/2560x1024" download>2560 x 1024</a>
<a class="dropdown-item" href="../downloads/Dual/3840x1080" download>3840 x 1080</a>
<a class="dropdown-item" href="../downloads/Dual/3360x1050" download>3360 x 1050</a>
<a class="dropdown-item" href="../downloads/Dual/3840x1200" download>3840 x 1200</a>
<a class="dropdown-item" href="../downloads/Dual/5120x1600" download>5120 x 1600</a>
<a class="dropdown-item" href="../downloads/Dual/8192x2304" download>8192 x 2304</a>
<a class="dropdown-item" href="../downloads/Dual/7680x2160" download>7680 x 2160</a>
<a class="dropdown-item" href="../downloads/Dual/10240x2880" download>10240 x 2880</a>
</div>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="../downloads/Triple/3840x1024" download>3840 x 1024</a>
<a class="dropdown-item" href="../downloads/Triple/5760x1080" download>5760 x 1080</a>
<a class="dropdown-item" href="../downloads/Triple/5040x1050" download>5040 x 1050</a>
<a class="dropdown-item" href="../downloads/Triple/5760x1200" download>5760 x 1200</a>
<a class="dropdown-item" href="../downloads/Triple/7680x1600" download>7680 x 1600</a>
<a class="dropdown-item" href="../downloads/Triple/12280x2304" download>11520 x 2160</a>
<a class="dropdown-item" href="../downloads/Triple/12280x2304" download>12288 x 2304</a>
<a class="dropdown-item" href="../downloads/Triple/15360x2880" download>15360 x 2880</a>
</div>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-apple" aria-hidden="true"></i>
</button>
<div class="dropdown-menu" role="menu">
<h6 class="dropdown-header">Dual Screen</h6>
<a class="dropdown-item" href="../downloads/macOS/dual/2560x1024" download>2560 x 1024</a>
<a class="dropdown-item" href="../downloads/macOS/dual/3840x1080" download>3840 x 1080</a>
<a class="dropdown-item" href="../downloads/macOS/dual/3360x1050" download>3360 x 1050</a>
<a class="dropdown-item" href="../downloads/macOS/dual/3840x1200" download>3840 x 1200</a>
<a class="dropdown-item" href="../downloads/macOS/dual/5120x1600" download>5120 x 1600</a>
<a class="dropdown-item" href="../downloads/macOS/dual/8192x2304" download>8192 x 2304</a>
<a class="dropdown-item" href="../downloads/macOS/dual/7680x2160" download>7680 x 2160</a>
<a class="dropdown-item" href="../downloads/macOS/dual/10240x2880" download>10240 x 2880</a>
<h6 class="dropdown-header">Triple Screen</h6>
<a class="dropdown-item" href="../downloads/macOS/triple/3840x1024" download>3840 x 1024</a>
<a class="dropdown-item" href="../downloads/macOS/triple/5760x1080" download>5760 x 1080</a>
<a class="dropdown-item" href="../downloads/macOS/triple/5040x1050" download>5040 x 1050</a>
<a class="dropdown-item" href="../downloads/macOS/triple/5760x1200" download>5760 x 1200</a>
<a class="dropdown-item" href="../downloads/macOS/triple/7680x1600" download>7680 x 1600</a>
<a class="dropdown-item" href="../downloads/macOS/triple/12280x2304" download>11520 x 2160</a>
<a class="dropdown-item" href="../downloads/macOS/triple/12280x2304" download>12288 x 2304</a>
<a class="dropdown-item" href="../downloads/macOS/triple/15360x2880" download>15360 x 2880</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container animated fadeIn" id="thumbnail-view" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 150 }'>
<div class="grid">
<div class="grid-item">
<a class="hexLink carousel-selector" data-slide="0">
<img width="150" height="97.5" class="img-thumbnail" src="http://via.placeholder.com/150x97">
</a>
</div>
</div>
</div>
</div>

Answer 1

Make the dropdown's position fixed, adjust the position (right/top) and give it a higher z-index value than the header itself