Mengapakah menu hamburger saya tidak dipaparkan pada telefon saya?

Question

Pada telefon saya, saya boleh mengklik di tempat yang sepatutnya dan menu lungsur muncul, tetapi atas sebab tertentu burger itu sendiri tidak kelihatan. Apabila saya melihat tapak dalam paparan mudah alih pada desktop, ia kelihatan, jadi saya keliru. Saya mencari di mana-mana di mana ia mungkin tersembunyi, tetapi saya tidak melihat apa-apa. Sebarang bantuan amatlah dihargai. Pautan laman web adalah seperti berikut:

https://chassis.site/

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 fowards ${index / 7 + 1}s`;
            }
        });
        //burger animation
        burger.classList.toggle('toggle');
    });


}

navSlide();

//sparkle
let index = 0,
    interval = 1000;

const rand = (min, max) => 
  Math.floor(Math.random() * (max - min + 1)) + min;

const animate = star => {
  star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
  star.style.setProperty("--star-top", `${rand(-40, 80)}%`);

  star.style.animation = "none";
  star.offsetHeight;
  star.style.animation = "";
}

for(const star of document.getElementsByClassName("magic-star")) {
  setTimeout(() => {
    animate(star);
    
    setInterval(() => animate(star), 1000);
  }, index++ * (interval / 3))
}

@import url('css.css');
:root {  
  --purple: rgb(123, 31, 162);
  --violet: rgb(103, 58, 183);
  --pink: rgb(244, 143, 177);
  --white: rgb(190, 190, 190);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  background: #0a0a0a;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  display:inline-flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(10, 10, 10, 0.5), rgba(0, 0, 0, 0.5)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px),
    url('../images/37P86Mcp.png');
  background-size: auto;
  background-position: center;
  z-index: 1;
}
/*--------------------------------------lines*/
hr.left {
  display: block;
  width: 30%;
  height: 1px;
  border: 0;
  border-top: 2px solid rgb(190, 190, 190);
  margin: 3em 0;
  padding: 0;
}
hr.right {
  display: block;
  width: 30%;
  height: 1px;
  border: 0;
  border-top: 2px solid rgb(190, 190, 190);
  margin: 3em 0;
  padding: 0;
}
/*--------------------------------------lines*/
/*--------------------------------------nav bar*/
nav{
  display: flex;
  position: fixed;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: 'Fugaz One', cursive;
}
.nav-links{
  display: flex;
  justify-content: space-around;
  width: 50%;
}
.nav-links li{
  list-style: none;
}
.nav-links a{
  color: rgb(190, 190, 190);
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 20px;
}
.burger{
  display: none;
  cursor: pointer;
}
.burger div{
  width: 30px;
  height: 3px;
  background-color: rgb(190, 190, 190);
  margin: 5px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1230px){
  .nav-links{
    width: 70%;
  }
}
@media screen and (max-width: 854px){
  body{
    overflow-x: hidden;
  }
  .nav-links{
    position: absolute;
    right: 0px;
    height: 30vh;
    width: 15em;
    top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.4s ease-in;
  }
  .burger{
    display: block;
    padding: 0px 80px 0px 500px;
  }
  hr.left{
    height: 0px;
    width: 0%;
  }
  hr.right{
    height: 0px;
    width: 0%;
  }
}
.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);
}
/*--------------------------------------nav bar*/
/*--------------------------------------sparkle*/
  @keyframes background-pan {
    from {
      background-position: 0% center;
    }
    
    to {
      background-position: -200% center;
    }
  }
  
  @keyframes scale {
    from, to {
      transform: scale(0);
    }
    
    50% {
      transform: scale(1);
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    
    to {
      transform: rotate(180deg);
    }
  }
  
  h1 {
    color: white;
    font-family: "Rubik", sans-serif;
    font-size: clamp(2em, 2vw, 4em);
    font-weight: 400;
    margin: 0px;
    padding: 20px;
    text-align: center;
  }
  
  h1 > .magic {
    display: inline-block;
    position: relative;
  }
  
  h1 > .magic > .magic-star {
    --size: clamp(20px, 1.5vw, 30px);
    
    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
  }
  
  h1 > .magic > .magic-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
  }
  
  h1 > .magic > .magic-star > svg > path {
    fill: var(--white);
  }
  
  h1 > .magic > .magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(
      to right,
      var(--purple),
      var(--violet),
      var(--pink),
      var(--purple)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    font-size: 64px;
  }
/*--------------------------------------sparkle*/

<!DOCTYPE html>
<html onclick="play()" lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatibale" content="ie-edge">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
    <audio src="media/music.mp3"></audio>
    <title>chassis.site</title>
      <style type="text/css">
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
      </style>
  </head>
  <body>
    <!-- nav-->
      <nav>
        <hr class="left"/>
        <ul class="nav-links">
          <li><a href="https://chassis.site/">Home</a></li>
          <li><a href="/subdomains/services.html">Services</a></li>
          <li><a href="https://e.rip/chassis/" target="_blank">Bio Page</a></li>
          <li><a href="/subdomains/projects.html/">Projects</a></li>
        </ul>
        <hr class="right"/>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
    <!-- nav-->
     <audio id="audio" loop>
        <source src="media/music.mp3" type="audio/mp3">
     </audio>
    <div id="app">
      <div class="text">
        <h1>
          <span class="magic">
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-text">chassis.site</span>
          </span>
        </h1>
      </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/music.js"></script>
    <script>/*music*/
        var audio = document.getElementById("audio");
        audio.volume = 0.1;
    </script>
    <script>/*music*/
      function play() {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>
  </body>
</html>

Answer 1

内边距：0px 80px 0px 500px;

Anda mempunyai css ini dalam menu burger anda dan 500px padding kiri adalah masalahnya.

Alih keluar padding itu dan sapukan css ini pada tempatnya

margin-left: auto;
margin-right: 6rem;

margin-left 会给你右浮动，然后 margin-right 你可以根据你的要求移动你的汉堡按钮，但是我不确定你到底想把汉堡放在哪里，所以你可以根据你的喜好调整 margin-right .