Create Top Notification Bar On Your Website Using HTML and CSS

Create Top Notification Bar On Your Website Using HTML and CSS

Top Notification Bar On Your Website

Beat Notification Bar or Hello Bar is an ideal approach to coordinate your guests and advance site’s most vital substance. Utilize best notice bar to advance items or show imperative notice for most extreme reach. In this instructional exercise, we’ll demonstrate to you best practices to make a Hello Bar or warning bar for your site.

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

Elevate items to offer more.

Increment social likes by setting the online networking catches.

Show news and occasions to draw in guests.

Develop supporters by offering membership shape.

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

Live Demo   Download Source Code

HTML Code

The accompanying HTML demonstrates a settled warning bar at the highest point of the site page with a nearby symbol.

<div id="hellobar-bar" class="regular closable">
    <div class="hb-content-wrapper">
        <div class="hb-text-wrapper">
            <div class="hb-headline-text">
                <p><span>Subscribe for Lisenme.com Here You Can "Get Easy And Learn Easy" and get FREE access to 100+ tutorials and scripts across programs</span></p>
            </div>
        </div>
        <a href="https://www.lisenme.com/" target="_blank" class="hb-cta hb-cta-button">
            <div class="hb-text-holder">
                <p>Subscribe Now</p>
            </div>
        </a>
    </div>
    <div class="hb-close-wrapper">
        <a href="javascript:void(0);" class="icon-close" onClick="$('#hellobar-bar').fadeOut()">&#10006;</a>
    </div>

CSS Code

<style>
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: #0099cc;
    border-color: #0099cc;
}
.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;
}
</style>

 

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x