How to make a closable hover header div for your website announcements or ads using CSS and Javascript

html and css programming language pictureIt’s perfect for site news

In this tutorial you will learn how to make a “hovering” header for your website news, announcements or ads. I am currently using the same technique on this blog too and it should have loaded up by now. (not any more!) As you can see it can be easily closed by the red X button and it’s “hovering” over the main content so it keeps showing even when your users scroll down.

The requirements

This script uses Font Awesome and jQuery via CDN. This basically just means that you need to add the following code inside your <head></head> tags:

<script src="//"></script>
<script src="//"></script>
<link rel="stylesheet" href="">

The HTML and CSS parts

This will be the face for your news box and you can customize things like font size, background color, padding, etc. Add the following code right after your opening <body> tag:

<div id="announcement">
 <span id='message'>Your message goes here. You can add a link if you want or whatever you like.</span>
 <span id='close'><a href="#" title="Close"><i class='fa fa-times'></i></a></span>
 <div id="delimiter"></div>

* I’m using the delimeter div to clear both floats so it will not cause any styling errors.

Here is my CSS

Customize it to fit the design of your website!

#announcement {
    padding: 0;
    margin: 0;
    display: none;
    background: #CCFF99;
    height: auto;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
 z-index: 9999;
#message {color: #000; font-size: 1em; float: left; padding: 0 2.1% 0 2.1%;}
#close {position: fixed; top: 0; right: 0; padding: 0 2.1% 0 2.1%;}
.fa-times {color: red;}
#delimiter { clear: both; }

* The position: fixed; along with top: 0; and left: 0; are what make the div hover over the main content. Same goes for the close button- just replace left with right to put it on the top right side of your page.

* z-index is a useful property because it specifies the stack order of an element. By giving it an unrealistic value we make sure it will stay on top of every possible element on your page.

* I’m using display: none; so that it will only display after Javascript has determined that the page is fully loaded.

* The fa-times class is for our close button. Font Awesome is really awesome ;)

Finally the Javascript

This is what makes everything work nicely! Add this code inside your <head></head> tags:

 window.onload = function () {
 document.getElementById('close').onclick = function(){
 return false;
 $(document).ready(function() {

* I use the window.onload function to execute the script only after the whole page has finished loading. If your user is waiting for the page to load and at the same time a news box appears, it might scare away a potential client.

* You should also notice the getElementById(‘close’) and $(“#announcement”). Do not change these, they are the ID’s of the close button and the news box itself.

Author: ynef

29 year old freelance writer and web developer. A technophile who appreciates and respects mother nature in all of its glory. Favorite skills in Runescape include Farming, Herblore and Magic.


You may also like