How to Create a Fixed Navigation Bar for Your Website

There are many ways to approach navigation on your website and they all have their pros and cons. We have the top horizontal navigation bar, which can limit the number of links you can have before you have to resort to sub menus which, in my opinion, aren’t the best — but if you’re only looking to keep a couple of items in your navigation bar, this could be the one for you.

Another approach is the vertical sidebar menu, but a drawback of this approach is that users can become overwhelmed when sub menus start popping out from all over the place. Finally, there’s the tab bar navigation system – the problem with this approach is that it takes a lot more time to design but if you design it well, boy is it good.

Screen Shot 2012-04-22 at 11.29.43

In this tutorial, I will be showing you how to create a horizontal navigation bar that sticks to the top of the screen using CSS and HTML. Now, why would you want it to stick to the top? Well, by having the bar stick to the top, this means that the user does not have to scroll to the top when they want to change page. For this tutorial, we’ll be using CSS and HTML and applying CSS3 effects such as drop shadows and background opacity.

Step 1

Open up your text editor, in this tutorial I will be using Chocolat — a great text editor, despite the fact it’s still in beta — and create a directory that contains a CSS file (main.css) and a HTML file (index.html).

Step 2

Within the HTML file, add the basic structure of a HTML document (the basic HTML5 structure is here) and ensure that the file links to your CSS file.

Step 3

Now, within your CSS file, we’re going to create a div that will contain the navigation bar and make it float, I’ll go through it step by step so you know what’s going on. Add the following to your CSS file:

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
} 

Screen Shot 2012-04-22 at 16.40.27

The first three lines define the navigation bar container to be fixed, meaning it does not move. The second line defines the position, at the top of the screen; if you were to change this value the navigation bar would change position but because we want it right at the top, 0 is the value we want.

Next, we define the width of the navigation bar at 100%. This means that the bar will span the entire width of the screen and webpage, you can change the size to something like 800px but I think it looks a lot better if it spans the entire width of the webpage. Next, we define the height (35px) – pretty self explanatory but feel free to change and experiment with the values.

We define where we want the text to appear and align itself, in our document it’s in the center but feel free to change this. If you do, make sure you apply padding to make sure the text isn’t right next to the left or right of the webpage. Next, we use padding to essentially position the text so that it will appear in the middle of the navigation bar.

Now, we get to interesting, fancy CSS3 stuff. The next three lines define that the navigation bar will have a shadow, the first two 0pxs define any inset we want on the shadow, for a navigation bar I wouldn’t suggest this, the 8px defines the blur of the shadow — I’ve chosen 8px because it doesn’t add too much of a blur whilst remaining noticeable. The final 0px is the amount of spread. You could think of this as a stroke applied before the shadow blurs, looks good if used correctly, looks terrible if it’s not and finally we have the hex value for the color of the shadow — I’ve used black (#000000) but you can use something like white or yellow to create a glow, depends on the background of your website really.

Now, the last two lines of the CSS define the background of the navigation bar and for a fixed navigation bar it looks good to have the bar semi-transparent and this is what this little CSS3 code does. The first three values specify the RGB values and for this I have created black (the only reason I’ve used black on this webpage is because the background is white and black is a nice contrasting color but feel free to change any of these values as you go along). The final value (0.8) is the alpha and this is what makes the background transparent. Alpha (or transparency) ranges from 0.1 (most transparent) to 1.0 (least transparent, or opaque). I have used 0.8 because the user will definitely be able to tell that it’s transparent whilst also being able to notice the text within the actual navigation bar.

The next two declarations essentially give the text that will be in the navigation bar some style and the #navigation a:hover defines what will happen when the user hovers over the text, in this case it will change from white to grey.

Step 4

Now, all of that is out of the way, we need to add some HTML to our document that will actually make use of this CSS. So, switch back to your HTML document and add the followong class and text to it:




Screen Shot 2012-04-22 at 16.40.10 1

Here, we’re making use of the navigation div that we created earlier and also adding some a tags that are links to other pages, feel free to change the ‘#’ signs to URLs.

Step 5

Open your HTML file in your browser and you’ll see that something isn’t quite right, there’s a space on the left hand side between the start of the navigation bar and the edge of the website. How could this be? We defined the width as 100%. Well, for some reason unknown to me, there’s automatically padding added to HTML documents by your browser and you must define otherwise in your CSS file.

Screen Shot 2012-04-22 at 16.41.00

Step 6

Switch back to your CSS file and add the follow code at the top:


body {
padding: 0;
margin: 0;
}

This will remove the automatically added padding to your document.

Step 7

Now, you can optionally add some text and information to your HTML document to test your new navigation bar. I’ve added some content (and given it some style which you can see if you view the source files) as well as added an image. Now open up the HTML document in your browser and you’ll be able to view the navigation bar and it will perform correctly.

Screen Shot 2012-04-22 at 16.41.19

The point of this tutorial was to show you how to get up and running with a navigation bar that stays at the top of a webpage. You can apply this not only to navigation bars but also to buttons that ask for feedback or take users to social network pages. This tutorial also demonstrates some interesting CSS3 principals and core HTML practices.

Click here to download the source files.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote