How to create a notification bar at bottom of page?

html

Solution

You're gonna need 3 things for that, but since your question is just tagged with HTML, I'll skip the Javascript part of it.

For the HTML, you just need something simple like:

<div class="notification-bottom">
  <p>Your Message goes <a href="/yourlink">here</a></p>
  <span class="notification-close">X</span>
</div>

And then, the css would look like this:

.notification-bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  /* Rest of your styling */
}

.notification-close {
  position: absolute;
  right: 5px;
  top: 5px;
  /* This are approximated values, and the rest of your styling goes here */
}

Then you would need some Javascript interaction to close it, wich should be just adding a class with `display: none` on it.

Hope this helps.

Problem

Original source