为什么我的汉堡菜单没有显示在手机上？

Question

On my phone, I can tap on where it should be and the dropdown menu appears, but for some reason the burger itself is invisible. When I view the website in mobile view on my desktop it's visible, so I'm very confused. I've looked all over for where it could possibly be hidden but I don't see anything. Any help is greatly appreciated. The website is linked below:

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

padding: 0px 80px 0px 500px;

You have this css in your burger menu, and that 500px left padding is the issue.

Remove that padding and apply this css in place of that

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

margin-left will give you right floating then margin-right you can move your burger button as per your requirement however I am not sure where exactly you want to place your burger from right so you can adjust margin-right as you like.

Answer 2

On your media query

@media screen and (max-width: 854px){
.burger{
    display: block;
    padding: 0px 80px 0px 500px;
}

You are using padding to push your menu from the left. So any phone with a width smaller than 500px will not see it. Here's a quick solution to get you started.

@media screen and (max-width: 854px){
    .burger{
        display: block;
        position: absolute;
        top: 10px;  
        right: 15px;
    } 

Adjust the top and right values as needed.

Answer 3

I think the problem you are having is related to padding you put on .burger . You should avoid using padding for alignment or any fixed value.

try something like this

@media screen and (max-width: 854px) {
.burger {
    display: block;
    margin: 0 24px 0 auto;
}
}

Answer 4

An initial test with responsive mode, using Safari on macOS shows the burger menu is slightly off screen, though when I tried on my iPhone it wasn't visible at all.

Plugging my phone into my computer, so I can use the console in Safari, I navigated down to where the burger is and I see for .burger :

padding: 0px 80px 0px 500px;

Commenting that out allows me to see the menu on my phone, suggesting that it is a sizing issue.

Based on my experience, you are probably better off positioning the burger menu using static or fixed positioning, relative to the top and right (for right hand-side menus) so that it works with any mobile screen width. Note, I am not a CSS expert, but this has worked for me.

I changed the definition of .burger to be as follows, based on the above comments, which worked for me:

.burger {
  display: block;
  position: absolute;
  right: 20px;
}

There is no top position here since the parent is already offset from the top, so while we could set top: 0 it feels a little redundant.