I'm new to HTML/CSS. I created this sidebar that when clicked, it will slide from the left side, and while it slides, an opacity background will show. Unfortunately, the images show on top of the opacity overlay and I can't find the problem to make it stop showing on top of the opacity so brightly. I'm doing this for a project asked by our subject teacher.
I've already tried using z-index but I'm not really an expert here since I'm a beginner and I get help from websites like w3schools.com
<style>
body {
margin: 0;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #fffff;
padding: 30px;
text-align: center;
}
#navbar {
overflow: hidden;
padding: 16px 14px;
background-color: #72cef6;
z-index: 90;
}
}
#navbar a:hover {
background-color: #ccebff;
color: #666666
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body>
<div id="navbar">
<style>
body {
font-family: "Calibri", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #ff9966;
display: block;
transition: 0.4s;
}
.sidenav a:hover {
color: #99d6ff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 22px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Moderator's Profile.html">Modertor's Page</a>
<a href="#">Members and Officers</a>
<a href="Constitution and By Laws.html">Constitution and By Laws</a>
<a href="#">Activity Layout</a>
<a href="about.html">Info.</a>
</div>
<span style="font-size:18px;cursor:pointer" onclick="openNav()"><font
color="#72cef6">___</font><img src="menu.png" height="24"></span>
<style>
element.style {
display: block;
}
.mm-open .mm-fullscreen-bg {
cursor: pointer;
background-color: rgba(0,0,0,0.55);
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
</style>
<div class="mm-fullscreen-bg" style="display: block;"></div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width
="250px";document.body.style.backgroundColor =
"rgba(0,0,0,0.4)";object.style.zIndex="999";
}
function closeNav() {
document.getElementById("mySidenav").style.width =
"0";document.body.style.backgroundColor
= "white";
}
</script>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
I just want to achieve the results of this..
Oh, and don't mind the links provided on the sidenav.