Hamburger menu dropdown does not appear right below it, it appears at the center of the page.
Can you help me so that the dropdown menu appears right below the hamburger menu instead of somewhere else?
body {
background: #020202!important;
}
.navbar {
position: relative;
z-index: 1000;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-toggler {
border: none;
padding: 0;
outline: none;
background-color: transparent;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
width: 24px;
height: 24px;
}
.navbar-collapse {
position: absolute;
top: 100%;
right: 0;
background-color: rgba(0, 0, 0, 0.9);
width: auto;
white-space: nowrap;
transform: translateX(-100%);
min-width: 150px;
}
.navbar-nav .nav-link {
color: white;
padding: 10px 20px;
}
@media (min-width: 992px) {
.navbar-collapse {
position: static;
background-color: transparent;
width: 100%;
transform: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> </head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/headerlogo.png" alt="Logo">
</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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Menu Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu Item 5</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>I have edited and made necessary changes to the code, so that anybody can recreate it. If you need any more code please let me know Thank you