Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Simple Sticky Navbar — Free Website Section Template
Navbar · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Simple Sticky Navbar — Free Responsive Header Template
Simple Sticky Navbar is a clean, dependable site header: your logo on the left, navigation links in the middle, and a log-in link with a call-to-action button on the right. It sticks to the top of the page with a frosted-glass blur, picks up a soft shadow once the visitor scrolls, and on small screens folds the links into a hamburger menu.
A mobile menu done properly
The hamburger turns into an X and opens a dropdown card where the links slide in one after another (GSAP). Pressing Esc closes it and returns focus to the button, Tab stays inside the open menu, and tapping outside or on a link closes it. Screen readers get the menu state (aria-expanded) and labels you can edit. Without JavaScript, the links simply show under the logo.
Sticky, or hide on scroll
Two switches control the behaviour: Sticky header keeps the bar at the top, and Hide on scroll down slides it away while reading and brings it back as soon as the visitor scrolls up, giving more room on small screens.
Your logo and links
Use the built-in icon-and-name mark or upload your logo (SVG or PNG). Links are an editable list of up to eight; reorder them and point them at page anchors or other pages. Leave the log-in text empty to hide it.
Export it
Download HTML, a ZIP, React or Vue (the menu script included), or fork into My Code. Put it above any hero section in the library and they share one theme.
Why use it
Why Use the Simple Sticky Navbar
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the logo, links and buttons in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Yes. The toggle is a real button with aria-expanded and an editable label, Esc closes the menu and returns focus to the button, Tab is kept inside the open menu, and the links work without JavaScript.
Switch on Sticky header. The section uses position: sticky at the top of the page and gets a shadow after you scroll. Turn on Hide on scroll down as well to slide it away while scrolling down.
Yes. Upload an SVG or transparent PNG in the Logo group; it replaces the icon-and-name mark. Keep it around 32 px tall.
At the very top of the body, before your hero. Because it is sticky, it should be a direct child of the body (not inside another wrapper with overflow hidden).
It saves an editable copy of your Simple Sticky Navbar in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.