Develop Reference

Why is my hamburger menu not showing up on mobile?

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>Home</li>
<li>Services</li>
<li>Bio Page</li>
<li>Projects</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>

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.

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.

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;
}
}

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.

Javascript Menu : Click on to extend & Click off to shorten

I created a menu for a web project, but I have a problem with the javascript side. I would like to extend the div container if it's clicked. And vice versa, I would like to shorten it if I click everywhere except on it. Actually, the program is able to shorten and extend the div menu but I can't manage the events :
if div is small -> extend it by clicking on it
if div is big -> shorten it by clicking everywhere except on it
There is my program :
const menu = document.querySelector('.wrapper')
const offClick = () => {
menu.classList.toggle('active')
document.removeEventListener('click', offClick)
}
const handleClick = (e) => {
e.stopPropagation()
menu.classList.toggle('.active')
if (menu.classList.contains('.active')){
document.addEventListener('click', offClick)
}
}
menu.addEventListener('click', handleClick)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #10131c;
}
.wrapper{
position: absolute;
width: 105px;
height: 105px;
background-color: #212532;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.8s;
}
.wrapper.active{
width: 300px;
height: 300px;
transition-delay: 0s;
}
.wrapper span{
position: absolute;
width: 10.5px;
height: 10.5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
transform: translate(calc(18px * var(--x)), calc(18px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s;
background-color: 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.wrapper.active span{
width: 67.5px;
height: 67.5px;
background-color: #333849;
transform: translate(calc(90px * var(--x)), calc(90px * var(--y)))
}
.wrapper span ion-icon{
transition: 0.5s;
font-size: 0em
}
.wrapper.active span ion-icon{
font-size: 2.025em;
color: #fff;
}
.wrapper.active span:hover ion-icon{
color: #d33d32;
filter: drop-shadow(0 0 3px #d33d32)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSite</title>
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body class="body">
<div class="wrapper">
<span style = "--i:0;--x:-1;--y:0;"><ion-icon name="code-outline"></ion-icon></span>
<span style = "--i:1;--x:1;--y:0;"><ion-icon name="moon-outline"></ion-icon></span>
<span style = "--i:2;--x:0;--y:-1;"><ion-icon name="bulb-outline"></ion-icon></span>
<span style = "--i:3;--x:0;--y:1;"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span style = "--i:4;--x:1;--y:1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style = "--i:5;--x:-1;--y:-1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style = "--i:6;--x:0;--y:0;"><ion-icon name="ribbon-outline"></ion-icon></ion-icon></span>
<span style = "--i:7;--x:-1;--y:1;"><ion-icon name="rocket-outline"></ion-icon></span>
<span style = "--i:8;--x:1;--y:-1;"><ion-icon name="stats-chart-outline"></ion-icon></span>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<script src="script/script.js"></script>
</body>
</html>
Thank you for your help !

Firstly, note that amending event handlers within an event handler is normally a code smell. There is usually a much better way to do what you need to achieve.
In this case you need to attach each of your event handlers just the once. handleClick() should be attached to the .wrapper so that it expands when clicked, and offClick() should be attached to the document so that it contracts the .wrapper.
const menu = document.querySelector('.wrapper');
const offClick = () => menu.classList.remove('active');
const handleClick = (e) => {
e.stopPropagation();
menu.classList.add('active'); // or .toggle('active')
}
menu.addEventListener('click', handleClick);
document.addEventListener('click', offClick);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #10131c;
}
.wrapper {
position: absolute;
width: 105px;
height: 105px;
background-color: #212532;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.8s;
}
.wrapper.active {
width: 300px;
height: 300px;
transition-delay: 0s;
}
.wrapper span {
position: absolute;
width: 10.5px;
height: 10.5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
transform: translate(calc(18px * var(--x)), calc(18px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s;
background-color: 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.wrapper.active span {
width: 67.5px;
height: 67.5px;
background-color: #333849;
transform: translate(calc(90px * var(--x)), calc(90px * var(--y)))
}
.wrapper span ion-icon {
transition: 0.5s;
font-size: 0em
}
.wrapper.active span ion-icon {
font-size: 2.025em;
color: #fff;
}
.wrapper.active span:hover ion-icon {
color: #d33d32;
filter: drop-shadow(0 0 3px #d33d32)
}
<body class="body">
<div class="wrapper">
<span style="--i:0;--x:-1;--y:0;"><ion-icon name="code-outline"></ion-icon></span>
<span style="--i:1;--x:1;--y:0;"><ion-icon name="moon-outline"></ion-icon></span>
<span style="--i:2;--x:0;--y:-1;"><ion-icon name="bulb-outline"></ion-icon></span>
<span style="--i:3;--x:0;--y:1;"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span style="--i:4;--x:1;--y:1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style="--i:5;--x:-1;--y:-1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style="--i:6;--x:0;--y:0;"><ion-icon name="ribbon-outline"></ion-icon></span>
<span style="--i:7;--x:-1;--y:1;"><ion-icon name="rocket-outline"></ion-icon></span>
<span style="--i:8;--x:1;--y:-1;"><ion-icon name="stats-chart-outline"></ion-icon></span>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>

First of all it looks really nice :)
As far as the javascript code you could keep it simple by adding the event listener on the whole body and checking the target of your click event has a parent with a 'wrapper' class, by using the closest method.
document.addEventListener('click',(event)=>{
if(event.target.closest(".wrapper")){
menu.classList.add('active')
}else{
menu.classList.remove('active')
}
})

How to hide a div with javascript depending on screen size after scrolling

I have a fixed div element and I want to hide it after scrolling for a width smaller than 767px. With media queries, I can do this when the width is smaller than 767px but I want to trigger the display: hidden after scrolling.
How can I do it?
body {
background: #000;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
</body>
</html>
I wrote the part of the code related to those fixed elements but feel free to use anything.
Thanks in advance!

You can listen to a scroll event and run the check below
if (window.matchMedia('screen and (max-width: 767px)').matches) {
// hide the element here
}
Take a look at How to hide a div wih jQuery dependant on screen size

You can use innerWidth and write a statement that if the width of the client is lower equal to 768, after scrolling, hide the element. else(width more equal to 769): show element.
I also used IIFE Function. That helps us after loading the page, it runs immediately and you won't need any other action or call to run the function.
(function () {
const section = document.querySelector('section');
window.addEventListener('scroll', () => {
window.innerWidth <= 768 ? section.style.opacity = 0 : section.style.opacity = 1;
}
)
})();
body {
height: 200vh
}
section {
width: 300px;
height: 200px;
background-color: orange;
}
<section></section>

It can be quite overheady listening for the scroll event, especially as in this case we are only interested when the user has moved down from (or back up to) the top.
This snippet uses a different method. It places a tiny div at the top of the page and sets an intersection observer on it. When it is in the viewport we know that we want to show magic whatever the width of the viewport so we set the visibility of magic to visible.
However, when it goes out of the viewport that means the user has scrolled and we set the visibility of magic to var(--visibility). --visibility is set to visible for larger viewport widths, and through a media query is set to hidden for widths under 768 - so magic will disappear. It will reappear if the user scrolls to the top or the viewport is widened (e.g. by the user altering the window size or maybe going to landscape mode on some devices).
This way we avoid the overhead of having to look at all scroll events and there is no need to look for the resize event either.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<style>
body {
background: #000;
height: 300vh;
/* just so we can scroll for the testing */
}
#sensor {
/* when this goes out of view we are deemed to have scrolled */
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 20px;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
visibility: visible;
/* this will get changed to var(--visibility) after a scroll on any width of device */
--visibility: visible;
/* this will get changed by CSS stylesheet media query on a narrow device */
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
--visibility: hidden;
}
}
</style>
</head>
<body>
<div id="sensor"></div>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
<script>
let callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// we are at the top of the page so haven't scrolled (or have scrolled right back up)
magic.style.visibility = 'visible'; //make magic element visible
} else {
magic.style.visibility = 'var(--visibility)';
}
});
};
const sensor = document.querySelector('#sensor');
const observer = new IntersectionObserver(callback);
const magic = document.querySelector('#magic');
observer.observe(sensor);
</script>
</body>
</html>

There are two options.
Listen to scroll event and then check the screen size
Listen to resize event, check the screen size and then listen to scroll event.
It is better to use the second option as resize triggers less frequently than scroll.
let element = document.querySelector('#magic')
window.addEventListener('resize', check)
check()
function check() {
if (window.matchMedia('screen and (max-width: 767px)').matches)
document.addEventListener('scroll', hide)
}
function hide() {
element.style.display = 'none'
}
body {
height: 1000px;
background: #000;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
</body>

Navigation bar isn't being responsive in the phone view

I am a beginner in web design and development and I am trying to make the navigation bar be more responsive when it is viewed on phones and tablets but for some reason it appears really buggy on the phone, I have used a meta tag so that the browser renders it correctly but it doesn't, it comes out all buggy like the picture below:
Click on the link to see picture -> As you can see it's coming out half and half
I have enabled overflow-x:hidden but some how am still able to browse towards the right and see the nav bar which isn't meant to be visible unless clicked, I don't understand why that's happening.
Click on the link to see picture -> This is how it is when you load it.
I have also tried to put the screen resolution as follows:
`#media screen and (max-width:1024px){
.nav-links
{
width:48%;
}
}
#media screen and (max-width:768px)`
This is also running on my firebase server and is available to view through this link:https://test-response-5f60c.web.app/PAGES/quotes.html
I am sorry for any code inconsistencies and mistakes, please help me out, I don't understand what I am doing wrong in the CSS. This is the tutorial I followed: Click on the link -> Tutorial
Following is my code:
function 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.5}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #000000;
color: #f9f9f9;
font-family: 'Open Sans', sans-serif;
font-size: large;
}
.logo{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
}
.nav-links {
list-style-type: none;
padding: 1.2%;
margin:0;
overflow: hidden;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.nav-links li a {
font-size: 18px;
font-weight: bold;
display: inline-block;
color: white;
text-align: center;
padding: 26px 26px;
text-decoration: none;
transition: 0.3s;
}
li a:hover {
background-color: #3498DB ;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 4px;
background-color: #f9f9f9;
margin: 5px;
}
.head {
font-family: sans-serif;
font-weight: bold;
margin: auto;
width: 60%;
border: 3px solid #3498DB ;
padding: 40px;
text-align: center;
opacity: 5.9;
animation-duration: 3s;
animation-name: fadein;
}
#media screen and (max-width:1024px){
.nav-links{
width:48%;
}
}
#media screen and (max-width:768px){
body {
overflow-x: hidden !important;
}
.nav-links{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #000000;
display: flex;
flex-direction: column;
align-items:center;
width: 50%;
transform: translate(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
.nav-active {
transform: translate(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);
}
#googleForm {
margin-left: 20px;
text-align: center;
margin-top: 20px;
}
<!doctype html>
<html>
<head>
<style>
body {
background-image: url('../IMG/land2.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: auto ;
}
</style>
<title> Quotes </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<h4> Edge Concreting and Landscaping </h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>Quotes</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div id="googleForm">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<script src="../JS/app.js"></script>
</body>
</html>

Set your media queries to a lower max width and position absolute.
For example.
#media (max-width: 768px){.logo h4 {position: absolute;
right: 50px;}}
That should enable you to select your logo and adjust it for mobile device.
#media (max-width: 768px){.nav-links{position: absolute;
right: 50px;}}
Should enable you to select and adjust your dropdown. You can change or substitute rightor left or top or bottom or width within the same media query.
Try reducing the width of nav-links.

This worked for me:
html, body {
overflow-x: hidden;
}
body {
position: relative;
}

How to show block below fixed container with jQuery?

Please someone help me out on this I got stuck in my code. I'm putting my code complete below please have a look and please try to provide better solution.
<!DOCTYPE html>
<!--[if lte IE 7]><html id="ie" class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 8]><html id="ie8" class="no-js lt-ie10 lt-ie9" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 9]><html id="ie9" class="no-js lt-ie10" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<!-- <link rel="stylesheet" href="css/site.css" /> -->
<link href='https://fonts.googleapis.com/css?family=Exo:400,100,200,300,500,600,700,800,900|Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
body.ticketDetail {
margin: 0;
padding: 0;
color: #292929;
font: 400 14px "Exo",sans-serif;
}
.fixed-container {
position: fixed;
top: 0;
}
.main-container {
padding: 85px 30px 100px;
background: none;
}
.toggle-wrap {
position: fixed;
z-index: 9;
box-shadow: 3px 0px 5px #000;
height: 59px;
}
.toggle-wrap {
width: 100%;
background: #f3f3f3;
background: rgba(243,243,243,0.8);
filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
}
.container-right>div {
height: 175px;
border-left: 13px solid #bbc3c6;
background: #f4f4f4;
margin: 0 0 8px;
-webkit-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-moz-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-ms-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-o-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
transition: transform .35s ease-in-out, background 0.8s ease-in-out;
}
.e-stand-b {
border-left: 13px solid #f39c11 !important;
}
.e-stand-a {
border-left: 13px solid #f1c40f !important;
}
.n-stand-a {
border-left: 13px solid #3497db !important;
}
.n-stand-b {
border-left: 13px solid #297fb8 !important;
}
.s-stand-a {
border-left: 13px solid #dae0e0 !important;
}
.w-stand-a {
border-left: 13px solid #e74b3c !important;
}
.w-stand-b {
border-left: 13px solid #c1392b !important;
}
.container-right>div:before {
content: '';
display: table;
}
.container-right>div:after {
content: '';
display: table;
clear: both;
}
.container-right>div:hover {
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-ms-transform: scale(1.03);
-o-transform: scale(1.03);
transform: scale(1.03);
background: #000;
background: rgba(0,0,0,0.5);
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}
.main-container .container-fluid {
padding: 0;
position: relative;
}
.container-right-column {
float: right;
width: 100%;
}
.container-right {
margin-left: 650px;
position: relative;
}
.container-left {
position: relative;
float: left;
background: #f4f4f4;
text-align: center;
width: 630px;
margin-right: -100%;
height: 635px;
}
.container-left h2 {
color: #9C9A9A;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 35px 0 34px;
}
.container-left img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.container-left a {
position: absolute;
opacity: 0;
transition: opacity .5s ease-in;
outline: none;
}
a.e-stand-b {
top: 14%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.e-stand-a {
top: 22%;
left: 20%;
z-index: 2;
width: 60%;
height: 8%;
}
a.n-stand-b {
top: 21%;
left: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.n-stand-a {
top: 28%;
left: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.s-stand-b {
top: 21%;
right: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.s-stand-a {
top: 28%;
right: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.w-stand-b {
bottom: 10%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.w-stand-a {
bottom: 18%;
left: 18%;
z-index: 2;
width: 63%;
height: 8%;
}
</style>
</head>
<body class="ticketDetail">
<div class="toggle-wrap">
</div>
<div class="main-container">
<div class="container-fluid">
<div class="container-right-column">
<div class="container-right">
<div class="e-stand-a">
</div>
<div class="s-stand-a">
</div>
<div class="w-stand-a">
</div>
<div class="n-stand-a">
</div>
<div class="e-stand-b">
</div>
<div class="s-stand-b">
</div>
<div class="w-stand-b">
</div>
<div class="n-stand-b">
</div>
</div>
</div>
<div id="fixed-container">
<div class="container-left">
<h2>Stadium Name</h2>
<img src="images/goan-stadium-img.png" alt="stadium" usemap="#Stadium" id="#Stadium" />
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 765) {
$('#fixed-container').css('position', 'initial');
}
if (windowSize > 765) {
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="b-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)b-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('b-'+stand_class);
});
// ----------***********Ticket Detail Hover method***********---------------
$("div.e-stand-a, div.e-stand-b, div.s-stand-a, div.s-stand-b, div.w-stand-a, div.w-stand-b, div.n-stand-a, div.n-stand-b").mouseenter(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).addClass('b-'+stand_class[0]);
}).mouseleave(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).removeClass('b-'+stand_class[0]);
});
/*$('#floatingElement').followMe({ container: '.container-column-main' });*/
}
if (windowSize <= 765) {
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').attr('href', '#to-top');
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="bm-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)bm-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('bm-'+stand_class);
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
var sliderTop = $('.container-right').height(); // header size
console.log(sliderTop);
$(window).scroll(function () {
//var notAnimated = true;
var scrollTop = $(window).scrollTop();
//console.log(sliderTop + " " + scrollTop);
if (scrollTop > 300) {
$('#fixed-container').addClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '300px');
}
if (scrollTop > sliderTop) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
if (scrollTop < 300) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
});
</script>
</body>
</html>
Right now when I click on the left side stadium anyone of block so accordingly in the right side column it is sliding down at the top of the right container.
And after scrolling down the page I make the left container position fixed and right container scroll-able. And clicking on any stadium block the right container blocks showing on top of container only.
But what I really want that when I scroll down and then click on the left container stadium block, the right container blocks should be shown in visible window not at the top of the right container.
Please someone help me out it's really needy... And please let me know.
Thanks