Top Sticky Notification Bar - Pure CSS + HTML

Top Sticky Notification Bar - Pure CSS + HTML

Top Sticky Notification Bar

Have you seen sticky notification bar the top of any website? I think yes because most of the website use these kind of notifications to attract visitors and today I am going to show you and provide you the source code of that notification bar which sticks at the top of a web page and grabs out user attraction.

You will be provided with the source code and if you want to add this kind of sticky notification bar on the top of your website whether it is on blogger or on wordpress you simply have to copy and paste the source code provided below to the template section of your website where you can edit the html code of your website.

Here is the Preview Of This Top Sticky Notification Bar:

This is the snapped preview of this top sticky notification bar you can see it below.

Top Sticky Notification Bar

What's happening buddy today we are going to make Top Sticky Notification Bar

As you know the HTML markup is mandatory for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

HTML markup for Top Sticky Notification Bar :

<div class="at-banner" id='banner'><div class="at-banner__content"><div class="at-banner__text">Hey friend, check out my <b>youtube channel</b> and subscribe to it!</div><a class="at-banner__button" onclick="document.getElementById('banner').style.display='none';" href="#">VIEW CHANNEL</a></div><div class="at-banner__close" onclick="'none';"></div></div> 
To make this sticky notification bar at the top of your website we don't need much lengthy HTML code for that.

You can see the source code is not too much length its about 3 to 4 lines of code.
Without CSS our this script (Top Sticky Notification Bar) will never look splendid. So here we are, our HTML markup is ready now we have to personalize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Top Sticky Notification Bar you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Top Sticky Notification Bar :

.at-banner{z-index:999999;position:fixed;top:0;right:0;left:0;background:#974DF3;width:100%;border-bottom:1px solid #EEEEEE;padding:10px;box-sizing:border-box;-webkit-transform:translateY(-150%);transform:translateY(-150%);color:#FFFFFF;font-family:"Open Sans", sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-animation:at-banner-slide-in 0.8s ease forwards;animation:at-banner-slide-in 0.8s ease forwards}.at-banner__content{display:flex;align-items:center;flex-direction:row;justify-content:center;width:90%;margin:0 auto;padding:10px 40px;box-sizing:border-box}.at-banner__title{font-size:18px}.at-banner__text{margin:0 20px 0 0}.at-banner__button{display:inline-block;background:#FFFFFF;height:40px;border:0;border-radius:2px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);padding:0 20px;color:#974DF3;font-size:12px;font-weight:700;line-height:40px;text-decoration:none;white-space:nowrap}.at-banner__close{position:absolute;top:50%;right:20px;width:20px;height:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer}.at-banner__close:before, .at-banner__close:after{content:"";position:absolute;top:50%;left:50%;display:block;background:#FFFFFF;width:100%;height:3px;border-radius:2px;-webkit-transform-origin:center;transform-origin:center}.at-banner__close:before{-webkit-transform:translate(-50%, -50%) rotate(-45deg);transform:translate(-50%, -50%) rotate(-45deg)}.at-banner__close:after{-webkit-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg)}@-webkit-keyframes at-banner-slide-in{0%{-webkit-transform:translateY(-150%);transform:translateY(-150%)}100%{-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes at-banner-slide-in{0%{-webkit-transform:translateY(-150%);transform:translateY(-150%)}100%{-webkit-transform:translateY(0%);transform:translateY(0%)}}

As a color scheme I have used my own background color that is purple and this is the hex code of that background color #974DF3 you can change it according to your requirement whatever color you like and whatever the color scheme of your website is.

A little bit of JavaScript code was required for this but I haven't created a separate script for that I simply added that code to our HTML you can see in the HTML markup that the JavaScript is added and it will be executed on click event.

We simply needed JavaScript code to hide or remove this notification bar when user Clicks on cross icon.

At The End :

So here we are, We have done and our project Top Sticky Notification Bar is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Top Sticky Notification Bar) File :

Top Sticky Notification
File Size 1.41 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

That's it we are done now if you want to download the project file download button is provided above you can download it from there our today's post and hair and if you want to post on this site you are welcome here you can simply write your post and wrap it in a text file and simply send that post a text file to my email ID I will review and try to publish that post on my website.
Thank you !

No Comment

Help us improve this article by leaving your feedback below.
Add Comment