COVID Alert Bar
Easy to use and customize, the COVID Alert Bar allows you to create highly-visible messages at the top of your homepage to promote critical instructions, timely updates, and links to details about your COVID-19 response.
Alert bars – also known as sticky bars, floating bars, notification bars, or hello bars – are a flexible, easy-to-use tool for keeping audiences about your COVID-19 response strategy.
Alert bars provide a highly visible zone at the top of your website that can be used to promote breaking news, updates, instructions, and other key information to your customers during a crisis situation.
While ideal for communicating your COVID-19 news and updates, alert bars can also be used for a variety of non-emergency applications, including:
Regardless of your message, an alert bar is incredibly effective because it grabs a visitor's attention without interfering with the rest of your website content.
This tutorial walks you through how to build out and customize an alert bar on your website.
Below is the HTML, CSS, and JavaScript required.
Add the HTML snippet to your templates or webpage, preferably at the top above any navigation or header so that it has prominent positioning.
Customize the background color and text/link colors by modifying the hexadecimal colors.