100% wide and high slides over content from top

The CSS –

#mobile-menu{display:none;position:relative;z-index:999999;}

#mobile-menu ul,#mobile-menu ol{margin:0;list-style:none;padding:0;}

.sidenav img{padding-top:6vh;}

.sidenav{height:0;width:100%;position:fixed;z-index:999999999;top:0;left:0;overflow-x:hidden;transition:height 1s;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);background:pink;}

.sidenav a{padding:1em 0;text-decoration:none;display:block;transition:0.3s;text-align:center;}

.sidenav .closebtn{position:absolute;top:-1em;right:25px;font-size:36px;margin-left:50px;}

@media screen and (max-height: 450px){.sidenav{padding-top:15px;}.sidenav a{font-size:18px;}}

Goes in the header php file (after </nav> –

<div id="mobile-menu">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>	
<script>
function openNav() {
  document.getElementById("mySidenav").style.height = "100%";
	    document.body.style.overflow = "hidden";
}

function closeNav() {
  document.getElementById("mySidenav").style.height = "0";
	    document.body.style.overflow = "auto";
}
</script>
<div id="mySidenav" class="sidenav">
		  				<?php
			the_custom_logo();
				?>
	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <a href="/home/">Home</a>
  <a href="#services">Services</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
	
	    <script>

      var menuItems = document.querySelectorAll('#mySidenav a');
      menuItems.forEach(function (item) {
        item.addEventListener('click', function () {
          closeNav();
        });
      });
    </script>
	
</div>
</div>