How to create a sticky notification bar on top of the website using CSS

Creating sticky hello bar is a very easy task. Just css is enough make this. On page scroll, it will be stick at the top of website. This type of notification bars are also call as top fixed bar for website

Sticky bar Using CSS

Copy following html, css codes and paste it below body tag of your website. That's it, you are done. Very easy right ?. Work on it and let us know your feedback via comments.

Note: Overflow: hidden should not be given to parent elements

---

HTML Code : Add it below body tag of you website

---

    <div id="sticky_bar">
        <div id="sticky_bar_text">
            Your notification goes here ..
        </div>
        <div id="sticky_bar_btn">
            <a target="_blank" class="btn" href="#">Sample Button</a>
        </div>
    </div>

---

CSS Code

---

#sticky_bar {
    padding: 8px 5px;
    background: #222;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
    text-align: center;
    box-shadow: 0px 1px 11px #888888;
    color: #fff;
    font-family: 'Viga', sans-serif;
    font-size: 1.1em;
}
#sticky_bar_text, #sticky_bar_btn {
    display: inline-block;
}
#sticky_bar_btn a {
  background:red;
  color:#fff;
  padding:2px 5px;
  text-decoration:none;
  border-radius:3px;
}

---

Demo

---

---

Search Keywords

• Website top sticky bar 
• Simply sticky hello bar
• Fixed Notification bar for website
• Sticky bar in html
• Sticky bar css
• Fixed bar on top of website