Floaty Header is a lightweight and flexible sticky header plugin that helps you fix any element to the top of the page when scrolling — be it your header, navigation, or an announcement bar. Perfect for improving user navigation, increasing visibility of key elements, and maintaining branding on long pages.
To make any element on your site sticky, all you need is the right CSS selector! Whether it's a simple one like header, #site-header, or .main-navbar, or something more specific like header > div.logo-wrap or .top-bar nav.primary ul.menu, Floaty Header makes it easy. Just copy the selector of the element you want to stick and paste it into the plugin settings. No coding skills required — it’s simple, fast, and works with any theme.
✨ Features
🎨
Scroll Transition Effects – Add smooth
Fade or
Slide animations when your header becomes sticky.
🖌️
Custom Sticky Background & Text Color (Mobile & Desktop) – Independently style your sticky header for both mobile and desktop with live color pickers.
📏
Offset Control – Set the scroll distance before your header sticks to the top.
📱
Mobile-Friendly Control – Option to disable sticky behavior on mobile devices for improved responsiveness.
📢
Sticky Announcement Bar Support – Make any announcement bar sticky to boost visibility for promotions or alerts.
🎯
Improved Styling – Enhanced handling for links, buttons, icons, and SVGs in sticky state.
⚡
Optimized Performance – Lightweight updates to keep your site fast and conflict-free.
✅ Additional Highlights
- Make any element sticky – headers, announcement bars.
- Works with any theme or page builder.
- Simple and clean UI with live previews.
- Easy setup – no coding required.