We Keep Coding

Background opacity over an image

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" class="sidenav">
×
About
Services
Clients
Contact
</div>
<img src="assets/images/logo2.png" class="myBrand">
<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:)

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" class="sidenav">
×
About
Services
Clients
Contact
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" class="myBrand">
<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" class="sidenav">
×
About
Services
Clients
Contact
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" class="myBrand">
<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>

Click off to close?

I have this code that creates a side menu.
https://jsfiddle.net/oak22424/xy1a4hqe/
And this code which closes the side menu.
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
It is created so when you click the "×" in the side menu, it will close the side pane. How can I add to this the ability to execute the same JavaScript function (called closenav) when you click anywhere but the menu area?

You can wrap the content in a "container" and then assign an event listener ('click')
let doc = document.getElementById('container');
doc.addEventListener('click', () => closeNav());
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";
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.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;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<div id="container">
<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>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

You can add a "click" event listener to the part of the document that closes the side menu when the target of the event is neither the open button nor contained within the side menu itself.
document.addEventListener("click", function(e){
if (e.target.id !== "openBtn" && !document.getElementById("mySidenav").contains(e.target)) {
//Note that I added an ID to the open button
closeNav();
}
})
Live Example:
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";
}
document.addEventListener("click", function(e) {
if (e.target.id !== 'openBtn' && !document.getElementById("mySidenav").contains(e.target)) {
closeNav();
}
})
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.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;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<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 id="openBtn" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

Create backdrop that spans the whole screen, when the sidenav is open, hide it when sidenav is closed, then listen to click events on it.
So it would be something like this:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("backdrop").style.display = 'block'
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
document.getElementById("backdrop").style.display = 'none'
}
window.onclick = (event) => {
let backDrop = document.getElementById('backdrop');
if (event.target == backDrop) {
closeNav();
}
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.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;
}
#backdrop {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
background: rgba(0, 0, 0, 0.7);
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="backdrop">
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<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>
</body>
</html>

You can create a mouse click listener and if the menu is showing and the mouse-x position is greater than the sidebar's rightmost point (dynamically calculated by div position, clientX, and width) then it calls the same javascript function you've already written to close.

Just put this code into your JavaScript, and I have the same sidebar on my website too, lol. w3Schools squad.
window.onclick = function(event) {
if (event.target == mysidenav) {
mysidenav.style.display = "none"; // Choose Either display:none; or Closenav()
closenav(); // Choose Either CloseNav() or display:none; I recommend closenav()
}
}

I could not make the sidebar button move along the sidebar in HTML,CSS

Hello Im trying to create a sidebar for a website of mine that that has open/close button that moves along with it.
I am basing my code this example of w3school in the example there are two separate buttons for opening and closing. I dont like having two separate buttons for the task and would like to combine them. So i modified the example to this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
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;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.openbtn {
font-size: 20px;
cursor: pointer;
position: fixed;
bottom: 50%;
left: 0;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
z-index: 1;
transition: 0.5s;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
About
Services
Clients
Contact
</div>
<div id="main">
<button id="sidebarButton" class="openbtn" onclick="sideButtonClicked()">☰</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
<script>
var lastState = false;
function sideButtonClicked() {
if(!lastState){
//open
lastState=true
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("sidebarButton").style.left = "250px";
}
else{
//close
lastState=false
document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft= "0px";
document.getElementById("sidebarButton").style.Left = "0px";
}
}
</script>
</body>
</html>
If you try running the code the when you click the button for the first time, the sidebar opens and the button goes along with it. That is great and what i wanted it to do, The problem is when closing the sidebar the button does not go back to its original position. The sidebar opens and close no problem but it would seem that this line of code is not working
document.getElementById("sidebarButton").style.Left = "0px";
Any idea how to fix it?

Although style properties are case-insensitive inside of stylesheets, the JavaScript API for styles is case-sensitive. Therefore, setting style.Left won't work since the correct property name is left.
document.getElementById("sidebarButton").style.left = '0';

You have a typo mistake document.getElementById("sidebarButton").style.Left should be document.getElementById("sidebarButton").style.left
var lastState = false;
function sideButtonClicked() {
if (!lastState) {
//open
lastState = true
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("sidebarButton").style.left = "250px";
} else {
//close
lastState = false
document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
document.getElementById("sidebarButton").style.left = "0px";
}
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
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;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.openbtn {
font-size: 20px;
cursor: pointer;
position: fixed;
bottom: 50%;
left: 0;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
z-index: 1;
transition: 0.5s;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
<div id="mySidebar" class="sidebar">
About
Services
Clients
Contact
</div>
<div id="main">
<button id="sidebarButton" class="openbtn" onclick="sideButtonClicked()">☰</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>

Click Outside To close slide menu Javascript

Hi I see similar questions but nothing that can help me,
I have a javascript menu, and I want to click outside the menu to close it, right now, you must click the X to close the menu, I want to be able to click anywhere on the page, outside the menu, to close the menu.
<head>
<style>
.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;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>

You could listen for clicks and check where the target is, or just create an overlay all over the page, and use a class for the open menu, instead of manually setting the sidenav width:
function openNav() {
document.body.classList.add('sidenav-open');
}
function closeNav() {
document.body.classList.remove('sidenav-open');
}
/* Same as you */.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background-color:#111;overflow-x:hidden;transition:.5s;padding-top:60px}.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#818181;display:block;transition:.3s}.sidenav a:hover{color:#f1f1f1}.sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}#media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, .1);
cursor: pointer;
z-index: 1;
}
.sidenav-open .sidenav { width: 250px; }
.sidenav-open #sidenav-overlay { width: 100%; }
<div id="sidenav-overlay" onclick="closeNav()"></div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>

Set up a click event listener on the document and, in the listener, check to see if the actual click came from anything that isn't the menu.
<head>
<style>
.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;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span id="open" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
let sidebar = document.getElementById("mySidenav");
let open = document.getElementById("open");
document.addEventListener("click", function(event){
// If the event didn't originate from the open button or the sidebar, close it
if(event.target !== sidebar && event.target !== open){
closeNav();
}
});
</script>

off canvas menu html css

I want to make a off canvas menu like this but I shall push the text out of the screen and not crop. And I want to add a function that close the menu after I clicked out of it.
I got the code from w3school off canvas menu.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
body {
font-family: "Lato", sans-serif;
}
.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, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<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.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

Rather than trying to add / remove CSS rules on the click events - try using a single function that adds / removes a class to achieve the opening / closing.
I create an open class that had the styling that you had in the js - then its just a case of adding / removing the class to allow the sidenav to open / close.
This is not how I would suggest to have it - but keeping it in touch with your original code as much as possible - I wrapped the entire thing in a div with an id of wrapper - and then said that on the click of that div (which contains the side nav and the main panel) that if the wrapper has the open class - then remove it (closing the sidenav) and if not - open it.
You will need to look at what you want to trigger the opening - I assume you don't want any click on the entire pain panel opening the side nave - but this should give you an idea on how to get a click outside of the sidenav to close it.
function toggleNav() {
var wrapper = document.getElementById("wrapper");
if(wrapper.classList.contains("open")){
wrapper.classList.remove("open")
} else {
wrapper.classList.add("open");
};
}
body {
font-family: "Lato", sans-serif;
}
.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;
}
.open #mySidenav {
width:250px;
}
.open #main {
margin-left:250px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<div id="wrapper" class="" onclick="toggleNav()">
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<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.</p>
<span style="font-size:30px;cursor:pointer">☰ open</span>
</div>
<div>