The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a notification bar for desktops

Written by

Bernardo Palos

in

Here’s a simple notification bar for desktops using HTML, CSS, and JavaScript. It appears fixed at the top of the screen and can be dismissed by the user.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Notification Bar</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .notification-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #007bff;
      color: #fff;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 9999;
    }

    .notification-bar p {
      margin: 0;
      font-size: 16px;
    }

    .close-btn {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }

    .hidden {
      display: none;
    }

    @media (max-width: 768px) {
      .notification-bar {
        font-size: 14px;
        padding: 10px 15px;
      }
    }
  </style>
</head>
<body>

  <div class="notification-bar" id="notificationBar">
    <p>This is an important desktop notification message.</p>
    <button class="close-btn" onclick="closeNotification()">×</button>
  </div>

  <script>
    function closeNotification() {
      document.getElementById('notificationBar').classList.add('hidden');
    }
  </script>

</body>
</html>

Features:

  • Fixed at the top of the screen

  • Responsive for smaller viewports

  • Includes a close button (×)

  • Easy to customize background color, message, and styling

You can insert this code at the top of your desktop-focused web page or include it in your template system. Let me know if you need a version that reappears after a time, integrates with a CMS, or tracks clicks.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About