Have a webpage with a simple slide out nav with a semi opaque background. I am not able to get the opaque background to cover my centered logo image (sorry couldn't add image but any image will do) .
I have change the z-index of the elements, giving the image a lower index than the slide over nav but this didn't help.
This is my code:
HTML:
<div id="mySidenav" >
<a href="javascript:void(0)" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<img src="assets/images/logo2.png" >
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
css:
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.myBrand img{
z-index: -1;
margin-left:50%;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
z-index: 100;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<!--Javascript-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
Any help or suggestions with this would be most appreciated. Thanks:)
CodePudding user response：
NOTE
A small note is that the CSS for your logo/image is set for .myBrand img { } which would imply that the <img> element is a child of another element with the class of myBrand. But the <img> element directly has the class of myBrand and is not a child of it, so you should be using just .myBrand { } to apply the CSS.
SOLUTIONS
The reason your logo shows up over the background is because you are simply applying your 'semi opaque background' effect to the document body, which is behind all elements on the page. It is the parent/container for all elements on the page and so it will not cover up any elements on the page.
This leaves you with two possible solutions. The first would be to actually create an element that has this semi opaque background to cover your page. The second option is to apply some transparency to your logo using the opacity property in CSS. The second option will work, but if you will likely still have issues with other images and elements on the page as well (because there is nothing covering your page, the parent element just got darker).
Solution 1
Here you add a new element that covers the entire page and has your semi opaque background. Initially it is hidden but when you run openNav() and closeNav() it will show or hide this element. Because your nav has its z-index set, it will remain on top of this new element while the rest of your page will be below it.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.querySelector("#cover").style.display = "block"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.querySelector("#cover").style.display = "none"
}html, body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#cover {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 1;
}
.myBrand {
margin-left:50%;
max-width: 100px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
z-index: 100;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}<div id="mySidenav" >
<a href="javascript:void(0)" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" >
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<div id="cover"></div>Solution 2
This solution simply alters the transparency of your logo image when the navigation menu is displayed or hidden. However, you will run into the same problem if you have other images or certain elements because you are only changing the background of the <body> and not actually covering the page with anything. It looks like it works with the text because the text is black, but certain <div> elements or other containers with backgrounds and styling will not blend in and will stick out like the logo did.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.querySelector(".myBrand").style.opacity = ".4"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
document.querySelector(".myBrand").style.opacity = "1"
}html, body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.myBrand {
margin-left:50%;
max-width: 100px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
z-index: 100;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}<div id="mySidenav" >
<a href="javascript:void(0)" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" >
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>