How To Create Notification Bar In WordPress?

In this tutorial, I have shown how to create a notification bar using HTML and CSS code.

First, you will need to copy and paste some custom CSS code for the alert bar. Simply go to the Appearance » Customizer page in your dashboard, then click the ‘Additional CSS’ tab at the bottom.

Now, go ahead and copy and paste this CSS code into that box:

.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}

After you’ve copied that code, it should look like this. Simply click the Publish button at the top of the page to save your CSS code.

Next, you need to add the HTML code for the alert bar text to your site.

<div class="alertbar">We are currently closed due to Covid-19.</div>

Now, you can visit your site to see the alert bar. It will be appearing at the top of every page.

In a few WordPress themes, your alert bar may overlap your menu. You could alter the height of the bar to 40px or 30px to avoid this. You will also need to reduce the line height accordingly, so that your text stays centered vertically in the bar.

I hope this post has helped you to learn how to create an alert bar in WordPress.
Thanks! Happy Coding.