Search
Star
Feedback
Setup for Free
© 2026 Hedgehog Software, LLC
Twitter
GitHub
Discord
System
Light
Dark
More
Communities
Docs
About
Terms
Privacy
Shakey header on hamburger menu click - Kevin Powell - Community
KP-C
Kevin Powell - Community
•
2y ago
•
1 reply
Emmanuel Ugwu
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
;
h
e
i
g
h
t
: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
;
}
Kevin Powell - Community
Join
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263
Members
View on Discord
Resources
ModelContextProtocol
ModelContextProtocol
MCP Server
Was this page helpful?
Yes
No
Similar Threads
Similar Threads
animations - hamburger menu
KP-C
Kevin Powell - Community / front-end
2y ago
Replace Hamburger Menu with a Menu Page?
KP-C
Kevin Powell - Community / front-end
12mo ago