Issue
With right: 0;, The menu is appearing on the right side. When I want to close it, I'm changing to right: -200px; so that I get the mobile page without the menu coming to the right. I want the fa-bars symbol to appear when the menu is not opened (right: -200px;), and the fa-xmark element when the menu is appearing (right: 0px;). I've tried many variations of the code and I still couldn't manage to do it.
@media (max-width: 700px) {
.nav_links ul li {
display: block;
}
nav .fa-bars {
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
position: absolute;
}
.nav_links {
position: absolute;
background: lightpink;
height: 100vh;
width: 200px;
top: 0;
right: 0px;
text-align: left;
z-index: 2;
}
nav .fa-xmark {
display: block;
color: black;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
}<nav class="nav_links">
<i class="fa-solid fa-xmark"></i>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Page</a></li>
<a class="button1" href="#"><button>My Instagram</button></a>
</ul>
<i class="fa-solid fa-bars"></i>
</nav>Solution
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
@media (max-width: 700px) {
body {
overflow-x: hidden;
}
.nav-container {
height: 300px;
position: absolute;
right: 0;
top: 0;
}
.nav-container i {
float: right;
margin: 10px;
cursor: pointer;
}
.nav-links {
position: absolute;
list-style: none;
top: 30px;
right: 0;
width: 100px;
padding: 20px ;
background: pink;
transition: 0.3s linear;
}
.nav-links.active {
right: -140px;
}
.nav-links li {
margin: 20px;
}
.nav-links li a {
color: black;
text-decoration: none;
}
}
</style>
</head>
<body>
<nav class="nav-container">
<i onclick="hanldeMenuClick()" class="fas fa-bars"></i>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Page</a></li>
<a class="button1" href="#"><button>My Instagram</button></a>
</ul>
</nav>
<script>
const btn = document.querySelector(".fas");
const navLinks = document.querySelector(".nav-links");
function hanldeMenuClick() {
navLinks.classList.toggle("active");
}
</script>
</body>
</html>Answered By - mujib shaikh
