Menu sticky

[jaroslavhuss]

Hello everybody,

Does anyone know how to make the navigation sticky? I was playing with tailwind classes but approaches like "fixed top-0" or "sticky" either do not work or break the menu.

Highly appreciate any help.

Jarda

[markteekman]

Hey @jaroslavhuss,

I did a project on Frontend Mentor once and made the menu sticky when the user scrolls up. Just a little CSS and JavaScript was used in the Header.astro component, you can check it out here: https://github.com/markteekman/sunnyside-agency-landing-page/blob/master/src/components/Header.astro.

Otherwhise you can set these Tailwind classes to the <header> tag in your Header.astro component:

<header class="sticky top-0 z-30">

Make sure to also set the dark/light background color for the header depending on whether darkmode is enabled or not.

Hope this helps!