Sticky header

Tailwind CSS Sticky header

A sticky header is a component that is pinned to the top of the viewport in desktop browsers. It stays visible when the user scrolls the page down or up.

Basic example

If you want to put the navbar to the top of the viewport in the desktop browsers, add the .sticky and .top-0 class to the nav element.

Scroll down

Scroll up

HTML

        
            
        <nav class="... sticky top-0">...</nav>

Sticky header

Tailwind CSS Sticky header

Basic example

Access restricted

To view this section you must have an active PRO account

Sticky header

Tailwind CSS Sticky header

Basic example

Related resources