Flexa Block Pro

The Sticky Announcement Bar Block: One Message, Pinned Where Nobody Misses It

A full-width bar pinned to the top or bottom of the screen — with an icon, a button, a countdown and a dismiss ✕ — that gets along with your theme’s fixed header instead of fighting it.

Part of Flexa Block Pro

Every announcement turns into a small deployment

You hand a site over to a client, and a week later the email arrives: can we put a notice at the top about the holiday closure? So you open the header template, drop a strip in, and then spend the rest of the afternoon working out why the theme’s fixed header is sitting on top of it. You hard-code a height, it lines up, everyone is happy.

Then the promotion ends and nobody can take the strip down without you. Then it needs to run on a second site whose header is a different height, and the number you hard-coded is wrong again. A one-line message keeps costing a developer.

The Sticky Announcement Bar block is that strip, built as a block. You write the message straight onto the bar in the editor, choose where it pins, and it measures its own height and moves the theme’s fixed header out of its way — there is no number for you to hard-code anywhere.

Pinned to the top of this page, merged with the header. The bar at the top of your screen is the block itself — scroll, and it travels with the header as one piece. Close it with the ✕ and it stays closed for the rest of your visit.

Autumn collection is live — free shipping while the launch lasts.

474Days20Hours14Min39SecSee the collection

What you actually get to decide

Pin it where it belongs — top or bottom of the screen, fixed for the whole visit or sticky as visitors scroll past, or left sitting in the flow of the page, nudged off the edge by as much as you like.
Tell it how to treat the theme header — merged with it as one block, above it, below it, or left alone. It finds the header on its own, and there is a selector box for the rare theme it cannot.
Add a live countdown — as chips with unit labels or one compact line, counting down to your deadline, and you choose what happens the moment it reaches zero: hide the bar, freeze the digits, or swap in a different message.
Choose when it shows up — hidden until visitors have scrolled past the hero, sliding away as they read down and returning the moment they scroll back up, sliding or fading into view.
Give it a start and an end date — and it runs the promotion by itself. Visitors can close it too, remembered for the visit, for a number of days, or not at all.
Plus an icon, a button with its own fill, hover and corner radius, and the usual spacing, colour and responsive controls, so it matches your design instead of fighting it.

Finished, not just featureful

A bar that sits over every page of a site has to behave itself. This one is built to.

The start and end dates are checked on the server, so an expired promotion is never printed into the page at all — a cached page cannot leak yesterday’s sale.
A dismissal is kept in the visitor’s own browser. No cookie is set, and nothing about them is sent back to your site.
The ✕ has a name screen readers can announce, the bar introduces itself as a named region, and the timer is marked up as a timer so it is not read out loud every second.
Every colour has a light and a dark counterpart, the motion stands still for visitors who ask for reduced motion, and the styling is worked out when you save the page, so the visitor’s browser has nothing left to compute.

Setting it up takes about a minute. Drop the block in, type the message on the bar itself, pick where it pins, and the editor shows you the result as you go. No template file, no CSS, and nothing your client has to phone you about when the sale ends.

It sits in the same editor as the blocks you already use and shares the same spacing, colour and responsive controls — it just needs Flexa Block switched on alongside it.

Put the message where it gets read

Write it once, pin it where you want it, and let the schedule take it down for you.

See Flexa Block Pro
More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found