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:
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 />
<ul >
<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 />
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
</nav>
<!-- nav-->
<audio id="audio" loop>
<source src="media/music.mp3" type="audio/mp3">
</audio>
<div id="app">
<div >
<h1>
<span >
<span >
<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 >
<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 >
<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 >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>CodePudding user response：
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.
CodePudding user response：
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.
CodePudding user response：
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;
}
}
CodePudding user response：
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.