var navLinks = document.getElementById("navLinks"); function showMenu(){ navLinks.style.right = "0" } function hideMenu(){ navLinks.style.right = "-700px" }

 header{ background-color: black; background-position: center; background-size: cover; height: 12vh; width: 100%; z-index: 1; position: fixed; } .logo img{ float: left; width: 70px; margin-top: 10px; } .main-nav{ float: right; margin-top: 30px; list-style: none; } .main-nav li{ display: inline-block; } .main-nav li a{ color: white; padding: 5px 10px; font-size: 15px; font-weight: bold; font-family: sans-serif; text-decoration: none; } .main-nav li.active a{ border: 2px solid #a40000; background-color: black; } .main-nav li a:hover{ border: 2px solid #a40000; background-color: black; }

 <header> <div class="logo"> <a href="r.html"><img src="logokm.png" alt="logokm"></a> <ul class="main-nav" id="navLinks"> <img class="hm" src="close1.png" alt="c" onclick="hideMenu()"> <li class="active"><a href="r.html">HOME</a></li> <li><a href="#ABOUTME">ABOUT</a></li> <li><a href="#MYSKILLS">SKILLS</a></li> <li><a href="#SERVICESOFFERED">SERVICES</a></li> <li><a href="#MYPROJECTS">PROJECTS</a></li> <li><a href="#CONTACTME">CONTACT ME</a></li> </ul> <img class="hm1" src="open1.png" alt="o" onclick="showMenu()"> </div> </header>