I am facing an issue when trying to create a responsive menu or dropdown button with Bootstrap 5. Everything seems ok. The navigation icon & dropdown icon appear. But it's not working. When I clicked the nav icon or dropdown button, no dropdown menu appeared.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link rel="stylesheet" href="css/bootstrap.rtl.min.css" -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<nav class="navbar navbar-light bg-light navbar-expand-sm mb-3">
<a class="navbar-brand">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" tabindex="0" data-bs-toggle="dropdown" data-bs-submenu="" aria-expanded="false">Dropdown 3</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown">Action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button">Another sub action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<button class="dropdown-item" type="button">Another sub action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button" disabled="">Disabled action</button>
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button">Another action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<button class="dropdown-item" type="button">Another sub action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
<div class="dropdown-header">Dropdown header</div>
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button">Another action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<button class="dropdown-item" type="button">Another sub action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<button class="dropdown-item" type="button">Something else here</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item" type="button">Separated link</button>
</div>
</li>
</ul>
</div>
</nav>
<!-- script src="js/bootstrap.bundle.min.js"></script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
Related
I'm convinced it's a minor mistake, but I can't seem to spot it. I'm following this edureka guide here:
https://youtu.be/jeZ-URjZM_M?t=978
This is the code:
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div id="dropdown" class="dropdown-menu" x-placement="bottom-start">
Home
shop
cart
checkout
Cheers
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Supposing you are using Bootstrap 4 as stated among your question tags...
Did you include every required resource like stated here?
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Anyway as you can see, the demo copied from the Boostrap4 web site just works as intended:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script>
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
I want to create a navbar like this site: digikala.com
my problem is when the mouse goes on menu item drop-down on mouse hover and open a container for all links to show in right
I want to know how I can have a container like this site?
I use bootstrap 4.6 in this page
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" style="color: purple;" href="#">Partineh</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<!-- <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> -->
<li class="nav-item">
<div class="dropdown">
<button class="btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<h5>دسته بندی کالاها</h5>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="menu-grid">
<div class="btn-group dropleft">
<button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft1
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<div class="container">
<div class="row">
<div class="col-12">
<button class="dropdown-item" type="button">Action1</button>
<button class="dropdown-item" type="button">Another action1</button>
<button class="dropdown-item" type="button">Something else here1</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">سوپرمارکت</a>
</li>
</ul>
</div>
</nav>
I want to make responsive navbar dropdown that when the website open in mobile the dropdown menu full screen. But when i try to make it to the right with "right: 0" it just go to the right of the toogle button. How to make it go to the right of screen and full screen?. I am use Bootstrap 4
<!-- Grup Tombol -->
<div class="col-6 col-sm-3 col-md-3 col-lg-2 d-flex align-items-center justify-content-end custom-grup-tombol">
<div class="row">
<!-- Chat -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-comments"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Chat -->
<!-- Notif -->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Lorem ipsum dolor sit amet consectetur adipisicing elit.</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End Notif -->
<!-- User-->
<div class="nav-item btn-group pl-1 ">
<button type="button" class="btn btn-info btn-block rounded" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- End User-->
</div>
</div>
<!-- END Grup Tombol -->
The Picture
If I understood you correctly, these tips may help:
To make dropdown-menu attached right, you can add the following lines to your style:
.dropdown-menu {
top: calc(2em + 2rem + 2px) !important;
right: 0 !important;
}
.nav-item, .btn-group>.btn, .navbar, div.justify-content-end.custom-grup-tombol {
position: static !important;
}
Also, I recommend you to break a line of the dropdown-items with long text by adding
.dropdown-item {
white-space: normal;
}
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 3 years ago.
I have a navbar with the links in div tag.Except for the navbar brand i want to shift all the items to the right.I want to shift all the element to the right of the navigation bar and I want to make it like a psd,but i dont know what is the mistake in my code.Please checkout the code below.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<a class="navbar-brand" href="#"><img src="assets/logo.png" width="100" height="40" alt=""></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="navbar navbar-right">
<a class="nav-link disabled" href="#" style="color:white;">How Switching Works</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:white;">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div>
<a class="nav-link disabled" href="#" style="color:white;">Blog</a>
</div>
<div>
<a class="nav-link disabled" href="#" style="color:white;">Contact</a>
</div>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-light my-2 my-sm-0" type="submit">Signup</button>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Login</button>
</form>
</div>
</div>
</nav>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
If you want all div go to right side except brand, use ml-auto class that push all content to the right side
<div class="navbar navbar-right ml-auto">
Make good navbar for mobile devices so its look nice
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-success">
<a class="navbar-brand" href="#"><img src="assets/logo.png" width="100" height="40" alt=""></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="navbar navbar-right ml-auto">
<a class="nav-link disabled" href="#" style="color:white;">How Switching Works</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:white;">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div>
<a class="nav-link disabled" href="#" style="color:white;">Blog</a>
</div>
<div>
<a class="nav-link disabled" href="#" style="color:white;">Contact</a>
</div>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-light my-2 my-sm-0" type="submit">Signup</button>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Login</button>
</form>
</div>
</div>
</nav>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
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>
Make the dropdown's position fixed, adjust the position (right/top) and give it a higher z-index value than the header itself