i don’t understand why my menuBtn doesn’t work on my site. The navigationbar is still visible on the site. When i investigate the site on chrome, the value of the
sideNav.style.right changes, but the nav-bar is still there.
Thanks to everyone who helped me a lot. It means a lot to me 🙂
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------------- Head -------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
*{
margin: 0;
padding: 0;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*------------ Background -----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#banner{
background: linear-gradient(rgba(4, 3, 3, 0.422),rgba(4, 3, 3, 0.422)) , url(pic/background.webp);
background-size: cover;
background-position: center;
height: 100vh;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------------- Logo -------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.logo{
width: 140px;
position: absolute;
top: 1%;
left: 5%;
z-index: 2;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*------------ Home / Text ----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.banner_text{
text-align: left;
color: white;
padding-top: 180px;
float: left;
margin-left: 5%;
}
.banner_text h1{
font-size: 100px;
font-family: 'Dancing Script', cursive;
padding-bottom: 1%;
color: transparent;
-webkit-text-stroke: 1px #fff;
background: url(pic/text_background_new_low.png);
-webkit-background-clip: text;
background-clip:text;
background-position: 0 200px;
background-size: -20%;
animation: back 20s linear infinite;
}
@keyframes back{
100%{
background-position: 3000px 0;
}
}
.banner_text p{
font-size: 15px;
max-width: 500px;
opacity: 0;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------- Contact us Button ------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.contact{
font-size: 15px;
margin-top: 5%;
opacity: 0;
}
.contact a{
width:190px;
padding: 12px 16px;
text-align:center;
float:left;
background: black;
/* Old browsers */
background: linear-gradient(to right , gold 34%, rgba(0, 0, 0, 0.197) 65%)right;
background-size: 300% 100%;
background-position:right bottom;
margin-left:10px;
transition:all 1s ease;
color: white;
transition: all 1s;
}
.contact a:hover{
background-position:left;
color:black;
}
.lover{
border: 2px solid #fff;
padding: 10px 35px;
border-radius: 30px;
margin-right: 15px;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*----------------- EFFECTS -----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.slide-left{
animation: slide-left 1s linear forwards;
}
@keyframes slide-left{
0% {
transform: translate(100px);
opacity: 0;
}
100% {
transform: translate(0px);
opacity: 1;
}
}
#p.slide-left{
animation-delay: 0.5s;
}
.contact.slide-left{
animation-delay: 0.7s;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*-------------- Navigation -----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#sideNav{
width: 100%;
z-index: 1;
position: fixed;
top: 0;
left: 0;
padding: 20px 20%;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #0000007f;
}
.sideNav ul{
width: 100%;
height:10px;
text-align: center;
}
#sideNav ul li{
display: inline-block;
list-style: none;
margin: 10px 48px;
}
#sideNav ul li a{
text-decoration: none;
color: white;
font-weight: 500;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------- Navigation / Animation ---------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#sideNav ul li a:hover{
color: gold;
}
#sideNav ul li::after{
content: '';
width: 0%;
height: 2px;
background: #ffd700;
display: block;
margin: auto;
transition: 0.2s;
}
#sideNav ul li:hover::after{
width: 100%;
background-color: #ffd700;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*--------------- Hamburger Menu ------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#menuBtn{
width: 50px;
height: 50px;
text-align: center;
position: fixed;
top: 10px;
right: 50px;
cursor: pointer;
border-radius: 3px;
z-index: 3;
display: none;
}
#menuBtn img{
width: 30px;
margin-top: 15px;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*--------------- Responsive ----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
@media only screen and (max-width:770px){
.sideNav ul{
width: 100%;
position: absolute;
top: 75px;
right: 0;
z-index: -1;
}
#sideNav ul li{
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
#sideNav ul li a{
color: white;
}
.banner_text h1{
font-size:70px;
}
.banner_text p{
font-size: 13px;
}
#menuBtn{
display:block;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autohaus Kaya</title>
<link rel="stylesheet" href="zzzAutohaus_Kaya.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<style>
html{
scroll-behavior: smooth;
scrollbar-width: normal;
}
</style>
</head>
<body>
<section id="banner">
<img src="pic/logo.png" class="logo">
<div id="sideNav">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Fahrzeuge</a></li>
<li><a href="#">Inzahlungnahme & Finanzierung</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="pic/hamburger_icon.png">
</div>
<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav= document.getElementById("sideNav")
var menu = document.getElementById("menu")
menuBtn.onclick = function(){
if(sideNav.style.right == "-250px"){
sideNav.style.right = "0";
}
else{
sideNav.style.right = "-250px";
}
}
</script>
<div class="banner_text slide-left">
<h1>Willkommen</h1>
<p class="slide-left">Gemeinsam finden wir Ihr passendes Wunschfahrzeug. Durch langjährige Erfahrung in der Automobilbranche wissen wir,
worauf Sie Wert legen. Lassen Sie sich gerne bei einem Kalt - oder Warmgetränk überzeugen und vereinbaren Sie jetzt
einen Termin.</p>
<div class="contact slide-left">
<a href="#" class="lover">Kontaktieren Sie uns</a>
</div>
</div>
</section>
</body>
</html>
>Solution :
I think it has something to do with left:0; already defining #sideNav. So instead of trying to alter the right with your JS code, try altering the left instead. Something like this:
menuBtn.onclick = function(){
if(sideNav.style.left == "800px"){
sideNav.style.left = "0";
}
else{
sideNav.style.left = "800px";
}
}
Here’s a demonstrations of it working:
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------------- Head -------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
*{
margin: 0;
padding: 0;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*------------ Background -----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#banner{
background: linear-gradient(rgba(4, 3, 3, 0.422),rgba(4, 3, 3, 0.422)) , url(pic/background.webp);
background-size: cover;
background-position: center;
height: 100vh;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------------- Logo -------------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.logo{
width: 140px;
position: absolute;
top: 1%;
left: 5%;
z-index: 2;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*------------ Home / Text ----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.banner_text{
text-align: left;
color: white;
padding-top: 180px;
float: left;
margin-left: 5%;
}
.banner_text h1{
font-size: 100px;
font-family: 'Dancing Script', cursive;
padding-bottom: 1%;
color: transparent;
-webkit-text-stroke: 1px #fff;
background: url(pic/text_background_new_low.png);
-webkit-background-clip: text;
background-clip:text;
background-position: 0 200px;
background-size: -20%;
animation: back 20s linear infinite;
}
@keyframes back{
100%{
background-position: 3000px 0;
}
}
.banner_text p{
font-size: 15px;
max-width: 500px;
opacity: 0;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------- Contact us Button ------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.contact{
font-size: 15px;
margin-top: 5%;
opacity: 0;
}
.contact a{
width:190px;
padding: 12px 16px;
text-align:center;
float:left;
background: black;
/* Old browsers */
background: linear-gradient(to right , gold 34%, rgba(0, 0, 0, 0.197) 65%)right;
background-size: 300% 100%;
background-position:right bottom;
margin-left:10px;
transition:all 1s ease;
color: white;
transition: all 1s;
}
.contact a:hover{
background-position:left;
color:black;
}
.lover{
border: 2px solid #fff;
padding: 10px 35px;
border-radius: 30px;
margin-right: 15px;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*----------------- EFFECTS -----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
.slide-left{
animation: slide-left 1s linear forwards;
}
@keyframes slide-left{
0% {
transform: translate(100px);
opacity: 0;
}
100% {
transform: translate(0px);
opacity: 1;
}
}
#p.slide-left{
animation-delay: 0.5s;
}
.contact.slide-left{
animation-delay: 0.7s;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*-------------- Navigation -----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#sideNav{
width: 100%;
z-index: 1;
position: fixed;
top: 0;
left: 0;
padding: 20px 20%;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #0000007f;
}
.sideNav ul{
width: 100%;
height:10px;
text-align: center;
}
#sideNav ul li{
display: inline-block;
list-style: none;
margin: 10px 48px;
}
#sideNav ul li a{
text-decoration: none;
color: white;
font-weight: 500;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*---------- Navigation / Animation ---------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#sideNav ul li a:hover{
color: gold;
}
#sideNav ul li::after{
content: '';
width: 0%;
height: 2px;
background: #ffd700;
display: block;
margin: auto;
transition: 0.2s;
}
#sideNav ul li:hover::after{
width: 100%;
background-color: #ffd700;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*--------------- Hamburger Menu ------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
#menuBtn{
width: 50px;
height: 50px;
text-align: center;
position: fixed;
top: 10px;
right: 50px;
cursor: pointer;
border-radius: 3px;
z-index: 3;
display: none;
}
#menuBtn img{
width: 30px;
margin-top: 15px;
}
/*-----------------------------------------------*/
/*-----------------------------------------------*/
/*--------------- Responsive ----------------*/
/*-----------------------------------------------*/
/*-----------------------------------------------*/
@media only screen and (max-width:770px){
.sideNav ul{
width: 100%;
position: absolute;
top: 75px;
right: 0;
z-index: -1;
}
#sideNav ul li{
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
#sideNav ul li a{
color: white;
}
.banner_text h1{
font-size:70px;
}
.banner_text p{
font-size: 13px;
}
#menuBtn{
display:block;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autohaus Kaya</title>
<link rel="stylesheet" href="zzzAutohaus_Kaya.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<style>
html{
scroll-behavior: smooth;
scrollbar-width: normal;
}
</style>
</head>
<body>
<section id="banner">
<img src="pic/logo.png" class="logo">
<div id="sideNav">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Fahrzeuge</a></li>
<li><a href="#">Inzahlungnahme & Finanzierung</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.stack.imgur.com%2FFw96Z.png&f=1&nofb=1">
</div>
<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav= document.getElementById("sideNav")
var menu = document.getElementById("menu")
menuBtn.onclick = function(){
if(sideNav.style.left == "800px"){
sideNav.style.left = "0";
}
else{
sideNav.style.left = "800px";
}
}
</script>
<div class="banner_text slide-left">
<h1>Willkommen</h1>
<p class="slide-left">Gemeinsam finden wir Ihr passendes Wunschfahrzeug. Durch langjährige Erfahrung in der Automobilbranche wissen wir,
worauf Sie Wert legen. Lassen Sie sich gerne bei einem Kalt - oder Warmgetränk überzeugen und vereinbaren Sie jetzt
einen Termin.</p>
<div class="contact slide-left">
<a href="#" class="lover">Kontaktieren Sie uns</a>
</div>
</div>
</section>
</body>
</html>