White space on HTML with high width - javascript

Hello i dont understand why there is a white space within the container on the rights side, that apeears above like 750 witdh ive been fighting with it for a couple of hours . i am kinda new too..... thanks in advance.
ive tryied playing with flex etc... grow shrink and more flex options i am sure i a missing something.
const hemburger = document.querySelector(`#hemburger`);
const linksContainer = document.querySelector(`.nav__links__container`);
const mainContent = document.querySelector(`.main__content`);
const divHandller = () => {
document.querySelector(`.after__content`).classList.toggle(`display`);
};
const hamburgerHandler = () => {
linksContainer.classList.toggle(`nav__display__icons`);
};
function displayWindowSize() {
// Get width and height of the window excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
if (w >= 600) {
linksContainer.classList.remove(`nav__display__icons`);
}
}
window.addEventListener("resize", displayWindowSize);
hemburger.addEventListener(`click`, hamburgerHandler);
mainContent.addEventListener(`click`, divHandller);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: black;
color: white;
width: 100%;
height: 100%;
}
html {
font-size: 62.5%;
}
a {
text-decoration: none;
color: white;
}
.container {
display: flex;
justify-content: space-around;
margin-top: 1rem;
align-items: baseline;
}
.nav__logo__container {
flex: 2;
margin-left: 1rem;
position: relative;
}
.nav__links__container {
flex: 0.5 1 auto;
transition: 1s all;
}
#nav__links {
margin: 1rem;
}
#nav__logo {
font-size: 1.5rem;
}
#hemburger {
margin-right: 2rem;
font-size: 1.5rem;
display: none;
color: white;
}
#media (max-width: 600px) {
.nav__links__container {
position: absolute;
flex-direction: column;
display: flex;
left: -100%;
z-index: 2;
}
#hemburger {
display: block;
}
.main__content {
flex-direction: column;
justify-content: center;
}
.btn__container {
align-self: center !important;
}
.main__content {
height: 30vh;
}
}
.nav__display__icons {
position: absolute;
flex-direction: column;
display: flex;
left: 0;
margin-top: 3rem;
}
/* NAV STYLING END */
.main__content {
width: 80%;
height: 80vh;
background-color: black;
margin: 0 auto;
border: rgba(255, 255, 255, 0.491) 1.5px solid;
margin-top: 1.5rem;
display: flex;
align-items: center;
border-radius: 10px;
position: relative;
}
#main__content__text {
}
.after__content {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(130, 127, 127);
top: -150%;
transition: all 2s;
border-radius: 10px;
}
.display {
top: 0%;
}
#main__content__text {
text-align: center;
height: 20rem;
width: 20rem;
font-size: 2rem;
line-height: 4rem;
}
.main__content__img__container {
font-size: 1.5rem;
}
.btn__container {
align-self: flex-end;
margin-bottom: 2rem;
}
#btn {
padding: 1rem 2rem;
border-radius: 25px;
animation-name: btnAnimation;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
position: relative;
}
#btn:hover {
}
#keyframes btnAnimation {
0% {
transform: translateX(-50px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 0.9;
}
}
#keyframes btnAfterAnimation {
0% {
opacity: 0.5;
width: 4rem;
color: black;
}
100% {
opacity: 0;
width: 100%;
color: black;
}
}
#btn::after {
content: "";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
background-color: rgb(118, 116, 116);
border-radius: 25px;
opacity: 0;
z-index: 1;
transition: all 1s;
}
#btn:hover::after {
animation-name: btnAfterAnimation;
animation-duration: 2s;
}
<!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>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="nav__logo__container">
Logo
</div>
<div class="nav__links__container">
Home
About
My project
Terms
</div>
<div> <i id="hemburger" class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
<section class="main__content">
<div class="main__content__text__container">
<h3 id="main__content__text">strategic design for brands and small business and for you</h3>
</div>
<div class="btn__container">
<button id="btn">Click here for more info</button>
</div>
<div class="main__content__img__container">
<h4>Test test test</h4>
</div>
<div class="after__content"></div>
</section>
<script src="https://kit.fontawesome.com/618bf7505f.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>


please try to add justify-content: space-around; to .main__content

Related

how do i activate a new class in java script?

I have this code.
When inspecting from the browser ,it seems when i click on hamburger-menu active class doesn't work.
I expect when I press the hamburger menu the container class to become the container.active class
Also,I set cursor: pointer for hamburger-menu and for link a(read-more) and it doesn't work.
Any help?
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

It is because your .hamburger_menu classes z-index was under the main element and its dimensions was covering your other elements. I have commented where I increased the z index so you can decide how to handle it. But this way of layering your elements is bad when scaling your project. The read more button is not navigating because u haven't set a href path. Set it to a link or an address and click on the button to navigate. The below code shows that as well.
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
alert("clicked")
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger-menu {
cursor: pointer;
width: 10%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
z-index: 4; //changed z index to a higher number
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 3;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
Read more
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

the problem is your "main" dom element which positioned absolute, so this is overlapping menu element.
So add position relative to menu in css and assign z-index to 1.
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
position: relative;
}
window.onload = function() {
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
width: 100%;
}
.navbar {
position: fixed;
width: 100%;
height: 3rem;
top: 0;
left: 0;
z-index: 1;
}
.menu {
max-width: 60rem;
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.hamburger-menu {
cursor: pointer;
width: 4em;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.menu-bar {
width: 50%;
height: 1.5px;
background: white;
position: relative;
transition: 0.5s;
right: 0;
}
.menu-bar:before {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(-7px);
}
.menu-bar:after {
position: absolute;
content: "";
width: 100%;
height: 1.5px;
background: white;
transform: translateY(7px);
}
.main {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: url("time.jpg") no-repeat top center / cover;
z-index: -1;
}
.background-blur {
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(43, 51, 59, 0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.future {
font-size: 3rem;
font-weight: bolder;
color: white;
}
.time {
font-size: 1.5rem;
font-weight: bold;
color: white;
}
.middle a {
position: relative;
top: 2rem;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
color: white;
border-radius: 25px;
background: blue;
padding: 0.6rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="menu">
<div class="hamburger-menu">
<div class="menu-bar"></div>
</div>
</div>
<div class="main">
<div class="background">
<div class="background-blur">
<div class="middle">
<h2 class="future">"Future is here"</h2>
<h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
<a href="#">Read more </a2>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Uncaught ReferenceError: $ is not defined problem

I've tried pasting the code copied from the code pen site below in the vault, but it doesn't work. I wonder why it's not working. What do I have to do to make it work? The CSS source code was imported using Viw compiled. Does this matter?
Code Pen Address
https://codepen.io/dodozhang21/pen/vNOmrv
Error :
249 Uncaught ReferenceError: $ is not defined
It says this is the problem.
var $form = $("#imageUploadForm"),
Paste Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#import url(https://fonts.googleapis.com/css?family=Nunito);
#import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #ffd16e;
height: 100%;
padding: 0;
margin: 0;
font-size: 16px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.uploadWrapper {
font-family: "Nunito", sans-serif;
}
.imageUploadForm {
background: #6e95f7;
height: 400px;
width: 500px;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.imageUploadForm .helpText {
color: white;
display: block;
position: absolute;
top: 2%;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 30px;
}
.imageUploadForm .helpText:after {
content: "\f067";
font-family: "FontAwesome";
font-size: 150%;
color: rgba(255, 255, 255, 0.5);
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
margin: 4% auto auto auto;
width: 50%;
height: 50%;
border: 6px dashed rgba(255, 255, 255, 0.5);
}
.imageUploadForm .pickFile {
position: absolute;
bottom: 0;
left: 0;
display: block;
background: white;
height: 25%;
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.imageUploadForm .pickFileButton {
display: inline-block;
padding: 0.7em 2em;
color: white;
background: #fb92ae;
text-decoration: none;
}
.imageUploadForm .pickFileButton:hover {
text-decoration: none;
}
.imageUploadForm .uploadButton {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 10;
}
.imageUploadForm.loading .helpText {
font-size: 0;
top: 7%;
}
.imageUploadForm.loading .helpText:before {
font-size: 30px;
content: "Uploading...";
}
.imageUploadForm.loading .helpText:after {
display: none;
}
.imageUploadForm.loading .uploadedImg {
position: absolute;
bottom: 12.5%;
left: 12.5%;
width: 75%;
height: 65%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 4px solid white;
-moz-transition: opacity ease-out;
-o-transition: opacity ease-out;
-webkit-transition: opacity ease-out;
transition: opacity ease-out;
}
.imageUploadForm.loading .unveil {
position: absolute;
background: #6e95f7;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
-moz-animation: toTop 4s forwards;
-webkit-animation: toTop 4s forwards;
animation: toTop 4s forwards;
}
.imageUploadForm.loading .unveil:after {
content: "";
position: absolute;
left: -3%;
bottom: 0;
height: 10px;
width: 106%;
background: #ffd16e;
border-radius: 5px;
}
.imageUploadForm.loading .pickFile,
.imageUploadForm.loading .uploadButton {
display: none;
}
.imageUploadForm.loading.loaded {
height: 200px;
}
.imageUploadForm.loading.loaded .uploadedImg {
opacity: 0;
}
.imageUploadForm.loading.loaded .helpText:before {
content: "Upload Complete!";
}
.imageUploadForm.loading.loaded .helpText:after {
display: block;
opacity: 0;
font-size: 0;
line-height: 100px;
-moz-animation: fadeIn 0.4s forwards;
-webkit-animation: fadeIn 0.4s forwards;
animation: fadeIn 0.4s forwards;
content: "\f058";
color: white;
margin-top: 2%;
border-width: 0;
}
#-moz-keyframes toTop {
to {
height: 0;
}
}
#-webkit-keyframes toTop {
to {
height: 0;
}
}
#keyframes toTop {
to {
height: 0;
}
}
#-moz-keyframes fadeIn {
to {
opacity: 1;
font-size: 90px;
}
}
#-webkit-keyframes fadeIn {
to {
opacity: 1;
font-size: 90px;
}
}
#keyframes fadeIn {
to {
opacity: 1;
font-size: 90px;
}
}
</style>
<body>
<div class="uploadWrapper">
<form id="imageUploadForm" class="imageUploadForm">
<span class="helpText" id="helpText">Upload an image</span>
<input type='file' id="file" class="uploadButton" accept="image/*" />
<div id="uploadedImg" class="uploadedImg">
<span class="unveil"></span>
</div>
<span class="pickFile">
Pick file
</span>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$uploadedImg[0].style.backgroundImage = "url(" + e.target.result + ")";
};
reader.readAsDataURL(input.files[0]);
}
}
var $form = $("#imageUploadForm"),
$file = $("#file"),
$uploadedImg = $("#uploadedImg"),
$helpText = $("#helpText");
$file.on("change", function () {
readURL(this);
$form.addClass("loading");
});
$uploadedImg.on(
"webkitAnimationEnd MSAnimationEnd oAnimationEnd animationend",
function () {
$form.addClass("loaded");
}
);
$helpText.on(
"webkitAnimationEnd MSAnimationEnd oAnimationEnd animationend",
function () {
setTimeout(function () {
$file.val("");
$form.removeClass("loading").removeClass("loaded");
}, 5000);
}
);
</script>
</form>
</div>
</body>
</html>

You have to import jquery in your HTML file, do this before you import your own scripts.
This is one source to import jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Here you can find more info about jquery: https://www.w3schools.com/jquery/jquery_get_started.asp

Place this script within the HTML haed to import Jquery. Make sure to place within the head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Mobile Resizable Window Dropdown Menu Doesnt Work

Ok so I'm attempting a mobile resizable window. When I tried running it, it doesn't work and I don't know why. Here is my html code:
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<i class="fas fa-gem"></i> AigoLearningJuniorTeam
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Our Team
</li>
<li class="navbar__item">
Weekly Challenges
</li>
<li class="navbar__item">
Monthly Challenges
</li>
<li class="navbar__btn"> Get Started </li>
</ul>
</div>
</nav>
<script>src="app.js"</script>
</body>
Everything works perfectly fine until I resize my window into a mobile version, the drop menu icon shows, but when I press on it, nothing happens.

change color when class have changed to 'open'

I made a hamburger menu with a class of .hamburger (inside .hamburger, there is a three .line classes)
shown hamburger menu
When I click a hamburger menu, class .nav-links pops up and class name changes to .nav-links .open when I inspect.
My problem is that opened .nav-links color is same as a color I gave to the hamburger menu.
but it disappears as they both have a same color
So I tried to change a hamburger menu(with a class .line) color when class .nav-links change to .nav-links .open but fail to figure out the solution.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!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>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>

Ok, try this out.
What I did was get all the line elements, toggled open on them, for which I added a .line.open bit in the CSS which paints them white.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
const hamLines = document.querySelectorAll(".line");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
hamLines.forEach(link => {
link.classList.toggle('open');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
.line.open {
background-color: white;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!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>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>

Z-index is not working when parent on position fixed

I'm doing a menu and i need its child to have a large z-index so that it´s on top of a modal when this is opened. it works perfectly, but when i set the menu to 'position: fixed' and open the modal, the child is kept behind the modal. Here is the code, ignore the last part of the css, which is just animations. Thanks for the help.
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function(){
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
/* position: fixed; */
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
}
.menu li {
list-style: none;
padding: 5px;
}
.menu li a {
font-family: sans-serif;
text-decoration: none;
color: #fff;
}
.btn-container {
z-index: 10000 !important;
}
.btn {
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
}
.btn span {
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
}
.btn #bar-one.barTop {
transform: translateY(8px) rotate(45deg);
}
.btn #bar-three.barBottom {
transform: translateY(-8px) rotate(-45deg);
}
.btn #bar-two.barMiddle {
opacity: 0;
}
.menu-overlay {
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
}
.menu-overlay.active {
display: block;
}
#keyframes fadeOverlay {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
.responsive {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
}
.responsive ul {
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
}
.responsive ul li {
padding: 5px;
}
.responsive ul li a {
text-decoration: none;
color: #fff;
}
.responsive.menuActive {
left: 0;
}
.close {
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
}
.close.closeActive {
animation: fadeClose .4s linear;
}
#keyframes fadeClose {
0%, 90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li>Home</li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li>Home</li>
<li>Exit</li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>

position:fixed create a stacking context forcing all the element inside to be painted inside. Your issue is that now, the overlay is covering the menu container including all its element and setting a higher z-index to elements inside will do nothing. In your case it's the button container that you can no more move outside that stacking context.
You have to increase the z-index of the container
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function(){
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
}
.menu li {
list-style: none;
padding: 5px;
}
.menu li a {
font-family: sans-serif;
text-decoration: none;
color: #fff;
}
.btn-container {
z-index: 10000 !important;
}
.btn {
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
}
.btn span {
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
}
.btn #bar-one.barTop {
transform: translateY(8px) rotate(45deg);
}
.btn #bar-three.barBottom {
transform: translateY(-8px) rotate(-45deg);
}
.btn #bar-two.barMiddle {
opacity: 0;
}
.menu-overlay {
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
}
.menu-overlay.active {
display: block;
}
#keyframes fadeOverlay {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
.responsive {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
}
.responsive ul {
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
}
.responsive ul li {
padding: 5px;
}
.responsive ul li a {
text-decoration: none;
color: #fff;
}
.responsive.menuActive {
left: 0;
}
.close {
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
}
.close.closeActive {
animation: fadeClose .4s linear;
}
#keyframes fadeClose {
0%, 90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li>Home</li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li>Home</li>
<li>Exit</li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>
Doing this will make all the container to be above the overlay which is also not the needed result.
In case you want the overlay to behave as it was intially, your only way is to make it inside the position:fixed element and also move the responsive menu there, so you make all the elements to belong again to the same stacking context and you can adjust the z-index like you want
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function(){
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
}
.menu li {
list-style: none;
padding: 5px;
}
.menu li a {
font-family: sans-serif;
text-decoration: none;
color: #fff;
}
.btn-container {
z-index: 10000 !important;
}
.btn {
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
}
.btn span {
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
}
.btn #bar-one.barTop {
transform: translateY(8px) rotate(45deg);
}
.btn #bar-three.barBottom {
transform: translateY(-8px) rotate(-45deg);
}
.btn #bar-two.barMiddle {
opacity: 0;
}
.menu-overlay {
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
}
.menu-overlay.active {
display: block;
}
#keyframes fadeOverlay {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
.responsive {
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
}
.responsive ul {
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
}
.responsive ul li {
padding: 5px;
}
.responsive ul li a {
text-decoration: none;
color: #fff;
}
.responsive.menuActive {
left: 0;
}
.close {
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
}
.close.closeActive {
animation: fadeClose .4s linear;
}
#keyframes fadeClose {
0%, 90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li>Home</li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li>Home</li>
<li>Exit</li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>
If you cannot change the HTML, you have no chance to obtain what you want.
Related question to get more details about stacking context and painting order:
Why elements with z-index can never cover its child?
How to z-index a repositioned div in css?

Categories