COVID-19 (Coronavirus) update from the CDC: Click here for the latest information

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.
Laptop with an example of an COVID Alert Bar at the top of the web page

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:

  • Changes to hours of operation or contact info
  • Service changes for transportation authorities
  • Limited-time sales promotions or offers
  • Scheduled website maintenance

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.

HTML

Add the HTML snippet to your templates or webpage, preferably at the top above any navigation or header so that it has prominent positioning.

CSS

Customize the background color and text/link colors by modifying the hexidecimal colors.

Result

Download from Github