I'am trying to make a mobile responsive website but when i use z-index and position so that my burger menu is on top of everything the menu is a little down any help
Code:
HTML:
CSS:
JavaScript:
Any Help?
Code:
HTML:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="/favicon.png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<title>GemPvP</title>
</head>
<body background="testbg.png" text="white"></body>
<div class="site-wrapper">
<body>
<center>
<div class="logo">
<img src="" height="300" width="300">
</div>
</center>
<br>
<div class="server-ip">
<span class="p-header-playNow-hostname-prefix">Server IP » </span>
<span class="p-header-playNow-hostname-copy" data-clipboard-text="gempvp.ga">GemPvP.GA</span>
</div>
<br>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="forums.php">Forums</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="rules.html">Rules</a></li>
<li><a href="http://gempvpstore.buycraft.net/" target="blank">Store</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>CSS:
CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'IBM Plex Sans', sans-serif;
}
nav{
border-radius: 25px;
width: 50%;
margin: 0 auto;
display: inline-block;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #1CE91F;
background-image: none;
}
.nav-links{
display: flex;
background-image: none;
justify-content: space-around;
width: 100%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(0, 0, 0);
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
.burger{
display: none;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgba(255, 255, 255, 0.925);
margin: 5px;
transition: all 0.3s ease;
}
.server-ip{
width: 100%;
text-align: center;
color: yellowgreen;
}
.logo{
width: 100%;
align-content: center;
}
@media screen and (max-width:1024px){
.nav-links{
width: 80%;
}
}
@media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.welcome{
max-width: 100%;
margin: 5 auto;
}
.nav-links{
width: 100%;
position: absolute;
right: 0px;
height: 86vh;
top: 14.25vh;
background-color: #1CE91F;
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
cursor: pointer;
display: block;
}
.logo{
display: none;
}
nav{
nav-index: 1;
z-index: 1;
position: relative;
height: 100%;
width: 100%;
background-color: #1CE91F;
border-radius: 0px;
}
}
.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,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
.logo img{
max-width: 100%;
}JavaScript:
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',()=>{
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();Any Help?