About this block
A thin accent-coloured strip for one short message and a link. Use it to announce a launch, a sale, a closure, or anything else people should see before they scroll. It spans the full width of the page and keeps the text centered.
When to use it
- At the very top of the page, above or inside your header, to flag something time-sensitive.
- For a sale or promo code that should be visible on every page.
- To warn about changed hours, a holiday closure, or a service outage.
- To point people at a new feature, product, or blog post.
What's inside
- A full-width bar in your theme's accent colour, with matching text colour for contrast.
- A one-line message in small, medium-weight text.
- A Learn more Link that underlines on hover.
- On narrow screens the link wraps onto its own line under the message instead of squeezing both.
How to customize it
- Rewrite the message to say exactly what changed and for whom, in under 10 words if you can.
- Point the Learn more link at the page with the details, and rename it to say what's there, like "See the sale".
- Change the bar's background to your primary or a neutral colour if accent clashes with your header.
- Remove the banner when the news is old. A stale announcement makes the whole site look unattended.
Questions
- Can I make the banner dismissible?
- This banner stays put. For a bar visitors can close and that remembers their choice, use a show-hide action with a local storage condition, the same way the cookie consent block works.
- Should the banner be sticky?
- Usually not. A sticky banner plus a sticky header eats a lot of screen on phones. Place it at the top of the page and let it scroll away.
- How long should the message be?
- Keep it to one line on desktop. If you need more than a sentence, put the details on a page and link to it.