Hello I am trying to get the hamburger menu in front of the background but cannot get it. I have tried setting the z-index to -1 for the background and other stuff but it does not work. When I view my website on my phone the menu does not appear. IDK how to fix it. When viewed on a computer it shows up but not mobile.
Heres the code.
CodePen: https://codepen.io/mfduar8766/pen/NavGXb
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html>body {
margin-right: 40%;
padding: 0px;
}
.slides {
background-image:
image("https://cdn.shutterstock.com/shutterstock/videos/12616586/thumb/1.jpg"),
image("https://ak8.picdn.net/shutterstock/videos/7797166/thumb/1.jpg"),
image("https://ak2.picdn.net/shutterstock/videos/7415047/thumb/1.jpg");
background-size: cover;
position: absolute;
height: 100%;
width: 100%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
z-index:-1;
}
.fa-bars {
position: fixed;
text-align: center;
padding: 2px;
top: 20px;
left: 85%;
width: 40px;
height: 40px;
font-size: 2.5em;
background-color: rgba(0, 0, 0, 0.5);
list-style-type: none;
color: white;
cursor: pointer;
}
@media screen and (max-device-width:738px) {
html {
margin: 0;
padding: 0;
}
.slides {
background-size:cover;
height:150%;
width:140%;
margin: 0;
padding:0;
z-index: -99;
}
body {
background-size: cover;
background-repeat:no-repeat;
height: 100%;
width: 100%;
}
.fa-bars {
position: fixed;
text-align: center;
padding: 2px;
top: 20px;
left: 80%;
width: 40px;
height: 40px;
font-size: 2em;
background-color: rgba(0, 0, 0, 0.5);
list-style-type: none;
color: blue;
z-index: 99;
}
}
</style>
</head>
<header id="mainNav">
<i class="fa fa-bars"></i>
<ul> <div id="hide">
<i class="fa fa-times"></i> </div>
<li class = "navigation_item"><a href="home.html">Home</a></li>
<li class = "navigation_item"><a href="AboutMe.html">About Me</a></li>
<li class = "navigation_item"><a href="Portfolio.html">Portfolio</a></li>
<li class = "navigation_item"><a href="Contact.html">Contact</a></li>
</ul>
</header>
<body>
<img class="slides" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/c/6/c64216733c442e4c63636168de88dc9cb8003164.jpg'/>
<img class="slides" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/3/a/3af14ad5f3ce8201cb10d3fa1907fd6f31bb90ca.jpg'/>
<img class="slides" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/9/d/9d4c8614879a35a8ae8741aac5d5ee6671e02b37.jpg'/>
<div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot">
</span>
</div>
</html>