100% wide and high slides over content from left

Goes in the CSS –

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

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

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

.sidenav{height:100%;width:0;position:fixed;z-index:999999999;left:0;top:0;overflow-x:hidden;transition: width 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.width = "100%";
            document.body.style.overflow = "hidden";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "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>