Create Notification Bar with HTML and CSS

Top Notification Bar or Hello Bar is the most ideal approach to coordinate your guests and advance the site’s most significant substance. Utilize the top notification bar to advance items or show a significant warning for most extreme reach. In this instructional exercise, we’ll tell you the best way to make a Hello bar or notification bar for your site.

Before you begin to make a top warning bar, investigate a few advantages of putting a Hello Bar on your site.

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

It’s anything but difficult to make a top fixed notice bar utilizing HTML and CSS. Additionally, you can utilize jQuery to include nearby usefulness in the top route bar. Here we’ll give straightforward content to add a top warning bar to the site utilizing HTML, CSS, and jQuery.

HTML Code

<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 semicolonworld Learning Week and get FREE access to 1000+ tutorials and scripts across programs</span></p>
            </div>
        </div>
        <a href="http://www.truewaysinfotech.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.

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 the 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>