How to Add a Fixed Position Banner to a Website

by Steven Snell

September 22, 2009 in Tutorials

One trend in web design that has been gaining popularity is the use of fixed position banners that remain at the bottom of the browser as visitors scroll vertically. There are a number of sites in the design niche that are using this approach for various purposes. In this post I’ll show you how you can add one to your site, and for WordPress users we’ll look at how you can change the banner depending upon the category of the post by using PHP.

First, let’s take a look at 5 websites that are currently using this type of banner.

Web Design Ledger

Web Design Ledger started using a fixed position banner a few months ago to promote their premium membership and it has since been changed to be used for advertising space.

WDL

Tutorial9

Tutorial9 was one of the first blogs (that I am aware of) that used a banner like this to sell advertising space.

Tutorial9

Envato

Envato makes use of a fixed position banner to provide links to the various websites in their own network of sites.

Envato

DesignMoo

Niche social media site DesignMoo also uses a banner to link to sites in their network, as well as to promote a WordPress theme that is for sale.

DesignMoo

Sitepoint

Sitepoint uses a fixed banner to promote their books that are for sale.

Sitepoint

The advantage of using a fixed position banner at the bottom of the browser is that it provides high visibility without being intrusive. Most of the sites mentioned above are using only 40 pixels of height for the banner, so it is essentially just reducing the visibility of the page by 40 pixels of height. The banner on DesignMoo even uses transparency so you can see through to the page behind the banner.

Setting up a banner area is pretty simple. For the purposes of this tutorial I will be adding a fixed postion banner to the theme here on DesignM.ag that will be used to promote one of our gallery sites, Folio Focus. This is not being used on the live theme, but you can see it in the screenshot below or you can visit the demo page.

Fixed Position Banner

HTML:

Place the following code directly after the opening body tag (for WordPress users, this is in the header.php file).

[cc lang="html"]

Folio Focus

[/cc]

The code uses a simple div with an image and a link to create the banner. Next, we will use CSS to style it.

CSS:

[cc lang="css"]#bottomBanner {
display: block;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
z-index: 999;
text-align: center;
background-color: #b5ae92;
}
#bottomBanner img {
margin: 0 auto;
border: none;
}[/cc]

Now we have a fixed position banner that stays at the bottom of the browser. (It should be pointed out that in IE6 the banner will appear at the very top of the page using this code).

Using PHP to Display Various Banners (for WordPress):

There may be some situations where you want to display different banners based on the category, the page, or some other factor. Imagine you have a few products that you sell at your blog. One of your products is directly related to the content of a particular category of posts, and another product is related to a different category of posts. Using PHP you can have different banners displayed according to the situation so that they will be more effectively targeted at the readers.

We will be using conditional tags to show the appropriate banner, and for this example the banner will be determined by the category of the post. I will have two banners that will be displayed for posts in a particular category, and a third banner that will be displayed in all other situations. If you were to use this approach on your own site/blog you could use use more or less banners depending on your needs. (Of course, you could use conditional tags for other things aside from post category. See the Codex page on conditional tags for more information.)

In the example, the Folio Focus banner will be displayed on posts in the “Inspiration” category, a banner for CartFrenzy will be shown on posts in the “Resources” category, and a banner for Minimal Exhibit will be shown in all other situations (posts in other categories, pages, index page, etc.).

Instead of using the HTML code shown above, we will use the following code in the header.php file inside the bottomBanner div, with nothing else in the div.

[cc lang="php"]

Folio Focus


CartFrenzy


MinimalExhibit


[/cc]

You will need to change the category numbers to match up with the appropriate categories of your own blog (you can get the numbers by going to the WP dashboard, click on “posts”, click on “categories”. The CSS code from the previous example would remain the same. Here it is again:

[cc lang="css"]#bottomBanner {
display: block;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
z-index: 999;
text-align: center;
background-color: #b5ae92;
}
#bottomBanner img {
margin: 0 auto;
border: none;
}[/cc]

This is not live on the blog, but here are some screenshots. A post in the Inspiration category shows the Folio Focus banner.

Fixed Position Banner

A post in the Resources category shows the CartFrenzy banner.

Fixed Position Banner

And a post outside of those two categories shows the Minimal Exhibit banner.

Fixed Position Banner

A fixed position banner could be used for a few different purposes including: selling ad space, promoting your own products/services, promoting affiliate products, promoting other sites in your network, encouraging visitors to subscribe, and more. The examples that we created in this tutorial used a single image that was the full size of the div, but you could use text, smaller images, or a combination.

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design.Connect with Stephen on google+

  • Johnny

    Sep 22nd

    Heh, yeah, I noticed that too. Glad to know how it’s done.

  • Eric B.

    Sep 22nd

    Why would anyone do this? I don’t know about anyone else, but I find them very annoying.

  • liz

    Sep 22nd

    I have noticed this a lot — and part of me agrees with Eric B., but I think this trend will grow on me. I think it is a little off putting to me because it has the appearance of being more an application control than a website element (like the way it’s used in Facebook makes sense.)

  • Steven Snell

    Sep 22nd

    Eric and Liz,
    I don’t mind them, but I can see why other people may not appreciate them. It shrinks the amount of available screen space, but only by a very small amount.

    Eric,
    The answer to why people would use them is very simple – income. It’s prime advertising space if you’re going to sell an ad, or it can be effective for marketing your own products. Of course, the risk of annoying your visitors is something that needs to be considered. Personally, I’d much rather visit a site with one of these banners than one that has AdSense in the content area.

  • BebopDesigner

    Sep 23rd

    Brilliant! this is useful

  • Janko

    Sep 23rd

    Nice little trick, Steven!

    I also find it less distracting than AdSense (probably anywhere on page). Personally, I think this is very good way to smoothly integrate ads on site. And you can be more creative than, let’s say, standard 125×125 banner. Some tests on this would be nice, though.

  • Dzinepress

    Sep 24th

    now a days specially when most popular companies some customize advrt places, so this article will help us for make premium places. thanks

  • Web 2.0

    Sep 24th

    Hey that was very useful, I was looking for a tut like this but had never found, great work, thanks :)

  • nu_am

    Sep 25th

    Nice, i was looking for something like this some time ago, figured out by myself when reading about z-index css 2 property.

    To complete what Steve said, another use of it could be an out of the box menu design, a news feed agregator like the tickers broadcasting on tv etc.

  • Leddo

    Sep 28th

    Ok, so i’m guessing the same could be applied to those sites that have something siting in the bottom corner, or as a tab that stays on the left/right edge of the screen. they normally use them for “feedback” links.

    What’s the thought on using something like this for an ecommerce site that has quick links for product categories, or that updates for suggested products?

    Chris

  • Tania

    Sep 28th

    Do you have any information or links to information on the performance of these ads… I have a potential advertiser who wants to know… and initial googling on the topic hasn’t yielded results.
    Thanks,
    Tania

  • Steven Snell

    Sep 28th

    Tania,
    I am not aware of any stats of this kind. I haven’t used this type of banner on any of my own sites, so I don’t have that type of experience with them. Stats may be hard to find because it will vary so much from one site to another.

  • Quicken Websites

    Sep 29th

    much better then AdSense for sure! Thanks, very useful!

  • Dave Doctor

    Oct 3rd

    Helpful, spot-on post. Will you add code to place the banner on the far right or left side of the page? Since most screen width usually exceeds screen height, users may forgive taking up the sides rather than the top and bottom of the screen. Thanks in advance.

  • Ngo QUang Hai

    Dec 16th

    It not work in IE6…

  • Steven Snell

    Dec 16th

    Ngo,
    Yeah, I know it doesn’t work in IE6. The post says,

    “Now we have a fixed position banner that stays at the bottom of the browser. (It should be pointed out that in IE6 the banner will appear at the very top of the page using this code).”

  • louis

    Aug 8th

    bravo

  • vuitton

    Aug 8th

    nice work

  • Chris

    Dec 4th

    I have just put my menu bar fixed to the left side of my new site, so it stays there as visitors scroll down the page. Only problem is if you want to scroll to the right of the page it goes under the content on the page. Anyone know of a way to fix it verticly only, so it will still move out of view as you scroll to the right?

  • CodeMyConcept

    Mar 8th

    It really represents creativity to place advertising without the client minding.

  • Leave a Comment

    Your email address will not be published. Required fields are marked *