Announcement bar for websites (top banner)
Write the message, add the link and pick the colors. Anyone who closes the bar will not see it again, and it can disappear on its own after the date you set.
How to useAnnouncement bar at the top of your site
Announcement bar for websites (top banner): what it is for
A bar at the top of the site is the simplest way to announce a sale, free shipping, special holiday hours or news without getting in the way.
Write the message and the link and choose the colors. The code remembers in the browser who closed it so it does not show again (until you change the text), can disappear on its own after a date and can stay fixed while scrolling. The bar goes at the start of the page, taking up its space from the moment it loads, so it does not push content down and hurt CLS.
How to use
- Write the text and the link.
- Choose the colors, close button and end date.
- Copy it and paste it right after the body tag.
When to use it
- Black Friday sales.
- Holiday hours notice.
- Free shipping or discount codes.
Frequently asked questions
How does the bar remember that someone closed it?
The code stores in the visitor's browser (localStorage) that this announcement was closed. If you change the text, the key changes too and the new announcement shows up for everyone again.
Does the bar hurt SEO or loading speed?
No, it is lightweight HTML and CSS. To avoid pushing the page down after it has loaded (which hurts Google's CLS metric), the code puts the bar at the start of the body, taking up the space from the beginning, and only removes it if the person has already closed it.
Can I show it only until a certain date?
Yes. Fill in the end date and the bar stops appearing after it, without you having to log in and remove it.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.