I am currently working on a project where I am attempting to create a responsive navbar with a hamburger menu that shifts the menu to the left when the device has a max-width of 480px. However, I seem to be facing some issues and can't quite figure out what I am doing wrong. I have tried targeting different classes within the navbar and dropdown but have not had any success. Apologies if my post is incorrect or in the wrong format, as I am still new to Stack Exchange. Any assistance would be greatly appreciated. Thank you!
HTML:
<nav>
<!--Navbar Start-->
<div class="container-fluid">
<div class="row">
<div class="col-12 border-bottom border-dark">
<div class="page-header text-center">
<h1>Genealogist</h1>
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<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 class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!--Navbar End-->
CSS:
html, body {
overflow-x: hidden;
}
.dropdown {
}
img:hover {
transform: translateX(60px);
}
.form {
padding-top: 50px;
}
main {
background-color: lightblue;
border-bottom: solid black 2px;
background-size: cover;
}
.experience ul {
list-style-type: none;
}
/* Width Covers 0px-480px */
@media screen and (max-width: 480px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
/* Width Covers 481px-768px */
@media screen and (min-width: 768px) {
body {
}
}
/* Width Covers 769px-1025px (and greater) */
@media screen and (min-width: 1025px) {
body {
}
}