#Header sticky makes children wiggle.

3 messages · Page 1 of 1 (latest)

upper merlin
#

If i set my header { posisiton: sticky; top: 0px}, the children ( logo.svg and hamburger toggle) wiggle on scroll on mobile.. tried fixed with and height for all. The only way i found to prevent the wiggle is header {position: fixed; transform: translateY(-XXpx}

last lionBOT
#

Hi @upper merlin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I'm sorry, but the knowledge sources provided do not contain specific information about issues with using position: sticky on the header in Astro, such as children (like a logo or hamburger menu) "wiggling" on scroll on mobile devices. The documentation covers how to build responsive headers and navigation, including using CSS for layout and interactivity, but it does not address this particular CSS behavior or bug.

If you are experiencing layout issues with position: sticky, this is likely related to general CSS and browser rendering rather than something specific to Astro. The documentation does provide example CSS for responsive headers and navigation, but does not mention sticky positioning or related issuesBuild it yourself - Header.

If you need further help, you may want to consult general CSS resources or browser-specific bug reports.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: