Hello everyone, I'm currently working on designing a mobile-friendly header menu with the bars positioned on the right side of the screen. The goal is to utilize JavaScript to allow users to click either an 'X' icon or the bars to open the menu located on the right side of the screen. However, I've encountered an issue:
- The bars are incorrectly positioned on the left side instead of the desired right side.
If anyone could provide assistance or insights, it would be greatly appreciated!
https://i.sstatic.net/pgZgv.png
Here's the HTML code that I have:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e3eaebf1e4f2e0f6eae8e0a8e3f7e0e0c5b0abb4b0abb1">[email protected]</a>/css/fontawesome.min.css">
</head>
<body>
<section class="header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="endangered.html">Endangered</a> </li>
<li><a href="">Contact</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu"></i>
</nav>
</section>
<script src="javascript.js"></script>
</body>
</html>
Below is the CSS code that I am using:
*{
margin: 0;
padding: 0;
font-family: "poppins", sans-serif;
}
.header{
height: 100vh;
width: 100%;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
.nav-links{
flex: 1;
text-align: center;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
text-decoration: none;
color: #5ab61d;
font-size: 20px;
}
.nav-links ul li a::after{
content: '';
background: #0ace83;
width: 0;
height: 2px;
margin: auto;
display: block;
left: 50%;
transition: all 0.5s;
}
.nav-links li a:hover::after{
width: 100%;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa{
display: block;
color: #000;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
Additionally, here is the JavaScript code being utilized:
/* Toggle between showing and hiding the navigation menu links when the user clicks */
var navLinks = document.getElementById("navLinks")
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
I've been trying to troubleshoot this problem for several hours now, any help provided would be immensely helpful!