Hey, I was in the middle of my project and really wanted to create a responsive navbar with a hamburger icon on the right side. I followed a tutorial on YouTube to achieve this.
Everything was going smoothly until I tested the code on my mobile device after deploying it online. I encountered an issue. Please check out the demo of the project here and visit the actual site at: (try viewing it in mobile view)
Whenever I double-tap the screen, it zooms out and looks weird as the height extends beyond 100vh, and the same happens with the width too.
What changes should be made in the following code to make it work correctly?
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<h3>College Facemash</h3>
</div>
<ul class="nav-links">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Login / Signup</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script>
const navslide = () =>{
const burger = document.querySelector('.burger')
const nav = document.querySelector('.nav-links')
const navLinks = document.querySelectorAll('.nav-links li')
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active')
navLinks.forEach((link, index) => {
if(link.style.animation){
link.style.animation = '';
}else{
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
burger.classList.toggle('toggle')
})
}
navslide();
</script>
</body>
</html>
and Style.css
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color:#512da8;
}
.logo{
color:white;
font-size: 1.5rem;
}
.nav-links{
display:flex;
justify-content:space-around;
width: 35%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
text-decoration: none;
color: white;
font-weight:bold;
font-size: 1rem;
}
.burger{
display:none
}
.burger div{
width:25px;
height: 2px;
margin:5px;
background-color: white;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px){
.nav-links{
width: 40%;
}
}
@media screen and (max-width: 640px){
body{
overflow-x: hidden;
}
.nav-links{
position:absolute;
right: 0px;
height: 92vh;
top:8vh;
background-color: #512da8;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-out;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
cursor: pointer;
}
.nav-active{
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,5px);
}
.toggle .line2{
opacity: 0
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-5px);
}
}