Emmanuel Ugwu
KPCKevin Powell - Community
•Created by Emmanuel Ugwu on 8/2/2024 in #front-end
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; }
2 replies