My goal is to create a responsive navbar with absolute positioning and have the menu items float right. However, when I add the position property, the menu items end up floating left instead. Additionally, applying absolute positioning to the nav element causes the hamburger icon for small screens to float left, and the closing icon disappears when it opens.
I need help finding the correct solution to make the nav element absolute without affecting the menu items and the hamburger icon.
Please test the code snippet on both desktop and mobile screens
document.getElementById("hamburger").addEventListener("click", function() {
this.classList.toggle("active");
document.querySelector(".mobile-menu").classList.toggle("active");
});body {
background-color: rgb(0, 0, 0);
margin: 0;
overflow-x: hidden;
cursor: pointer;
}
img {
margin-top: 100px;
}
@media (max-width: 767px) {
img {
margin-top: 40px;
height: 80px;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
/* Navigation Menu */
nav {
height: 70px;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
nav #menu {
display: flex;
height: 100%;
}
nav #menu li {
padding: 0px 30px;
line-height: 70px;
transition: all 0.3s ease-out;
}
nav #menu li a {
color: #fff;
}
nav #menu li a:hover {
color: rgb(238, 215, 12);
}
@media (max-width: 767px) {
nav #menu {
display: none;
}
}
/* Mobile Menu */
#hamburger {
position: absolute;
float: right;
right: 10px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#hamburger .line {
height: 5px;
background: rgb(238, 215, 12);
margin: 5px auto;
backface-visibility: hidden;
}
#hamburger.active #one {
transform: rotate(45deg) translateX(6px) translateY(6px);
}
#hamburger.active #two {
opacity: 0;
}
#hamburger.active #three {
transform: rotate(-45deg) translateX(10px) translateY(-12px);
}
@media (max-width: 767px) {
#hamburger {
visibility: visible;
opacity: 1;
}
}
.mobile-menu {
z-index: 1;
position: absolute;
top: 0px;
background: black;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-out;
display: table;
}
.mobile-menu .mobile-menu__items {
height: 50px;
display: table-cell;
vertical-align: middle;
}
.mobile-menu .mobile-menu__items li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 35px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.mobile-menu .mobile-menu__items li:hover {
color: rgb(238, 215, 12);
}
.mobile-menu .mobile-menu__items li:hover a {
transition: all 0.3s ease-out;
color: rgb(238, 215, 12);
}
.mobile-menu .mobile-menu__items li a {
color: white;
}
.mobile-menu.active {
visibility: visible;
opacity: 0.99;
}
@media (min-width: 768px) {
.mobile-menu {
visibility: hidden !important;
}
}
/* Main */
h1 {
z-index: 1;
color: #fff;
left: 0;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- Navigation Menu -->
<header>
<nav>
<a href="home"><img src="images/logo.svg" alt="logo"></a>
<ul id="menu">
<li><a href="home">HOME</a></li>
<li><a href="work">WORK</a></li>
<li><a href="about">ABOUT</a></li>
<li><a href="javascript:;">CONTACT</a></li>
</ul>
<div id="hamburger">
<div class="line" id="one"></div>
<div class="line" id="two"></div>
<div class="line" id="three"></div>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu">
<ul class="mobile-menu__items">
<li><a href="home">HOME</a></li>
<li><a href="work">WORK</a></li>
<li><a href="about">ABOUT</a></li>
<li><a href="javascript:;">CONTACT</a></li>
</ul>
</div>
</header>
<!-- Main -->
<main>
<h1>hello</h1>
</main>
</body>
</html>