Do you wish to show a fix message bar? Here is a super easy tutorial to show a fixed message bar at the bottom of the page in order to display an announcement, promotional offers or an important article recently published.

HTML code

<div id="dexbar">
    <strong>Don't miss out any post!</strong> <a href="#">Subscribe to our newsletter</a>

 CSS code

  background: rgb(252, 70, 30);
  color: #fff;
  display: block;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0px;
  text-align: center;

#dexbar a{ 
        color: #fff; 
        font-weight: normal; 
@media only screen and (max-width: 767px) {
        display: none;


You might find interesting:   Pure CSS Loading spinner done fast


Please enter your comment!
Please enter your name here