Horizontal Navbar

So, can you add this to the template that you have now? Absolutely, and here's how to do it.! Firstly, take a look glance at the nav on this page, to see how your navbar will look, then we can get started applying that to your own pages.

I have actually made some changes to it, to fit better with my page. So there is no background color, and I have moved it slightly to the left so link hover color doesn't overlap my page edge.

Important note! This navigation is designed to hold a limited amount of links. If you add to many, then the links will break down to a new row, which is not a good look. So ensure that the links all fit on one line, when viewed at 800x600px resolution.

We are going to alter both our page, and the stylesheet to achieve this, as well as create a new shtml file, so let's start with the stylesheet.

Open up your nav.css file (original template owners will use navigation.css) and paste the following into it. At the end of the sheet will be fine...you can comment it how you wish, by using the /* some comments */

The Stylesheet

The Page

So this set up only needs to be done the one time. In the template, you have an area for the header, then below that is the spacer cell.What we want to do is insert a new row between those, for the horizontal nav.

Okay, so that's the row inserted. Make sure it goes in your code directly after the closing tr tag for the header. Now we need to actually put something in that row....you won't see a lot until we do.I have added the same class as is used for the header. So if my header has a white background color, this row will as well.

Of course, you could make a totally seperate class for it, depending on how you want the background to look. In fact, if your header class has a height specified in the stylesheet, you will have to do that.

The Links

So add this into the new row that you have created.

You will have to add in your own URLs and link titles of course. Check to see that it looks good, and works before taking the next step.

You may also want to change some of the colors in the stylesheet...the ones provided may not suit your web-site. So just look for the color codes and have a play with them! I would suggest changing one color at a time, then checking it. You will soon find out what property changes which color. The font can be changed too, if you wish. One last thing to change, if you wish. See a line in the code float:left; that can be changed to right if you prefer. The centering of a floated list is a little more complex, and we wont deal with that here. You will find that on another page!

The Include

Now that it's all working as it should you need to put it into an include. You probably know how to do that, but refer to your ebook as a refresher if you have to.

This is a far better option that leaving the navigation on the actual page .... you never know when you may want to change something in the future.

Good luck with it. Follow the instructions exactly, and you shouldn't have any problems. I hope this will help take your site closer to how you want it to look!