Create Top Notification Bar with HTML and CSS

Top Notification Bar or Hello Bar is the best way to direct your visitors and promote website’s most important content. Use top notification bar to promote products or show important notification for maximum reach. In this tutorial, we’ll show you how to create a Hello bar or notification bar for your website.

Before you start to create a top notification bar, take a look at some benefits of placing a Hello Bar to your website.

• Promote products to sell more.
• Increase social likes by placing the social media buttons.
• Display news and events to engage visitors.
• Grow subscribers by offering subscription form.

It’s very easy to create a top fixed notification bar using HTML and CSS. Also, you can use jQuery to add a close functionality on the top navigation bar. Here we’ll provide a simple script to add a top notification bar to the website using HTML, CSS, and jQuery.

HTML Code

The following HTML shows a fixed notification bar at the top of the web page with a close icon.

<div id="hellobar-bar" class="regular closable">
    <div class="hb-content-wrapper">
        <div class="hb-text-wrapper">
            <div class="hb-headline-text">
                <p><span>Register for CodexWorld Learning Week and get FREE access to 1000+ tutorials and scripts across programs</span></p>
            </div>
        </div>
        <a href="http://www.codexworld.com" target="_blank" class="hb-cta hb-cta-button">
            <div class="hb-text-holder">
                <p>Register Now</p>
            </div>
        </a>
    </div>
    <div class="hb-close-wrapper">
        <a href="javascript:void(0);" class="icon-close">&#10006;</a>
    </div>
</div>

CSS Code

The following CSS is used to design and styling the top notification bar and relative content.

body{
    margin: 0;
    padding: 0;
    width: 100%;
}
#hellobar-bar {
    font-family: "Open Sans", sans-serif;
    width: 100%;
    margin: 0;
    height: 30px;
    display: table;
    font-size: 17px;
    font-weight: 400;
    padding: .33em .5em;
    -webkit-font-smoothing: antialiased;
    color: #5c5e60;
    position: fixed;
    background-color: white;
    box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
}
#hellobar-bar.regular {
    height: 30px;
    font-size: 14px;
    padding: .2em .5em;
}
.hb-content-wrapper {
    text-align: center;
    text-align: center;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
.hb-content-wrapper p {
    margin-top: 0;
    margin-bottom: 0;
}
.hb-text-wrapper {
    margin-right: .67em;
    display: inline-block;
    line-height: 1.3;
}
.hb-text-wrapper .hb-headline-text {
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
}
#hellobar-bar .hb-cta {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 0;
    color: #ffffff;
    background-color: #22af73;
    border-color: #22af73
}
.hb-cta-button {
    opacity: 1;
    color: #fff;
    display: block;
    cursor: pointer;
    line-height: 1.5;
    max-width: 22.5em;
    text-align: center;
    position: relative;
    border-radius: 3px;
    white-space: nowrap;
    margin: 1.75em auto 0;
    text-decoration: none;
    padding: 0;
    overflow: hidden;
}
.hb-cta-button .hb-text-holder {
    border-radius: inherit;
    padding: 5px 15px;
}
.hb-close-wrapper {
    display: table-cell;
    width: 1.6em;
}
.hb-close-wrapper .icon-close {
    font-size: 14px;
    top: 15px;
    right: 25px;
    width: 15px;
    height: 15px;
    opacity: .3;
    color: #000;
    cursor: pointer;
    position: absolute;
    text-align: center;
    line-height: 15px;
    z-index: 1000;
    text-decoration: none;
}

Top Bar Close Functionality

One line of jQuery will be used to hide the top notification bar on a button (x) click.

Since we’ll use jQuery, include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

To hide notification bar use jQuery fadeOut() in the onclick event of the close (x) anchor link.

<a href="javascript:void(0);" class="icon-close" onclick="$('#hellobar-bar').fadeOut()">&#10006;</a>

Conclusion

In the example script, we’ve built a simple top notification bar with some basic content with HTML and CSS. You can change the content and style of top notification bar as per your requirement.