Shakey header on hamburger menu click
Hi everyone,
I am working on a website, I have done the layout for desktop and mobile. The desktop header looks okay but on the mobile my nav list disappear on click and my header is Shakey
<header>
<nav>
<div class="hamburger">
<h1>
LOGO
</h1>
<a href="#" class="hamburgerBtn"> <svg width="40" height="17" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="M0 0h40v3H0zM0 7h40v3H0zM0 14h40v3H0z"/><path d="M0 0h40v3H0z"/></g></svg> </a> </div> <div class="nav-list"> <ul> <li class="nav-items"> <a href="#" class="nav-links drop-down"> Renters </a> </li> <li class="nav-items"> <a href="#" class="nav-links drop-down"> Landlords </a> </li> <li class="nav-items"> <a href="#" class="nav-links"> Blog </a> </li> <li class="nav-items"> <a href="#" class="nav-links"> About Us </a> </li> </ul> </div> <a href="#" class="cta"> Get Started </a> </nav> </header> Css header{ width: 100%; background: black; color: white; transition: none; height:35px; } svg{ fill: white; } nav{ width: 90%; margin: 0 auto; } nav h1{ text-transform: uppercase; } .hamburger{ display: flex; justify-content: space-between; align-items: center; } .nav-list, .cta{ display: none; } .active{ position: fixed; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50vw; height: 100vh; margin: auto; text-align: center; background-color: black; z-index: 1000; } nav ul{ list-style-type: none; width: 100%; margin: auto; padding: 0; } nav a{ color: white; text-decoration: none; }
<a href="#" class="hamburgerBtn"> <svg width="40" height="17" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="M0 0h40v3H0zM0 7h40v3H0zM0 14h40v3H0z"/><path d="M0 0h40v3H0z"/></g></svg> </a> </div> <div class="nav-list"> <ul> <li class="nav-items"> <a href="#" class="nav-links drop-down"> Renters </a> </li> <li class="nav-items"> <a href="#" class="nav-links drop-down"> Landlords </a> </li> <li class="nav-items"> <a href="#" class="nav-links"> Blog </a> </li> <li class="nav-items"> <a href="#" class="nav-links"> About Us </a> </li> </ul> </div> <a href="#" class="cta"> Get Started </a> </nav> </header> Css header{ width: 100%; background: black; color: white; transition: none; height:35px; } svg{ fill: white; } nav{ width: 90%; margin: 0 auto; } nav h1{ text-transform: uppercase; } .hamburger{ display: flex; justify-content: space-between; align-items: center; } .nav-list, .cta{ display: none; } .active{ position: fixed; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50vw; height: 100vh; margin: auto; text-align: center; background-color: black; z-index: 1000; } nav ul{ list-style-type: none; width: 100%; margin: auto; padding: 0; } nav a{ color: white; text-decoration: none; }
1 Reply
I suggest that you put your code in a codepen along with the JavaScript code that you have for the nav section. That way it will be easier for somebody to understand your issue and, hopefully, help you resolve it.