Screenshot of current state
I need help! I am new in development and trying to make website responsive. When I use the toggle devices, toggle doesn't hide the links. It just kind of expands the page, please refer to the image for a better description of what I'm referring to.
P.S I was just practising, I apologize for the bad layout.
Here is the code:
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Wew</h4>
</div>
<ul class="links">
<li><a href="">hehehh</a></li>
<li><a href="">hehehh</a></li>
<li><a href="">hehehh</a></li>
<li><a href="">hehehh</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="index.js"></script>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
width: 100%;
overflow-x: hidden;
}
nav {
align-items: center;
background-color: red;
display: flex;
padding: 0 5rem;
justify-content: space-between;
height: 90px;
}
nav ul {
display: flex;
gap: 40px;
}
nav li {
list-style: none;
}
.burger div {
width: 25px;
height: 3px;
margin: 4px;
background-color: black;
}
.burger {
display: none;
}
@media screen and (max-width: 940px) {
body {
overflow-x: hidden;
}
.burger {
display: block;
}
.links {
position: absolute;
right: -100%;
top: 5.6rem;
height: 300px;
width: 200px;
flex-direction: column;
background-color: red;
transition: all 0.50s ease;
}
.links li {
position: relative;
left: 30px;
width: 100px;
top: 20px;
}
.burger {
z-index: 1;
}
}
.nav-active {
right: 0%;
}
The JavaScript:
const Navslide = () => {
const burger = document.querySelector(".burger")
const links = document.querySelector(".links")
burger.addEventListener("click", () => {
links.classList.toggle("nav-active")
})
}
Navslide()
Here you will give the position absolute into the links but you cannot specify the relative section so when you click on the toggle button, the menu links go to the outside of the div and show to horizontal scroll on the screen. so give the position:relative on the navigation tag and so the scrollbar is not showing.
currently only header is available on screen not the other content on screen so outside links are not showing so we just add screen height into the body tag so menu is showing properly and not show the horizontal scrollbar and we got the output as per your requirement.