Building a Good Author Web Site:

Fixing the Navigation Bar with CSS

by David Dvorkin


Go to Introduction and Table of Contents

In a couple of other sections, Navigation and Accomodating Browsers, I talk about using CSS to create special effects, and why it's not a good idea to do that on a personal Web site. Nonetheless, I thought I'd show one special effect that some people might want to use.

In Navigation, I discussed the problem with keeping your links in view. You can put them on the top or the bottom or the side of the page, but unless the page is small enough to fit entirely within the typical browser window, then as the user scrolls down, the links will slide out of view. On my site, I've compromised by having links both at the top and bottom of the page. That's still far from ideal: most of the time, both sets of links are out of sight, beyond the margins of the browser window. As you can see, this page is different.

If you search the Web, looking for "fixed navigation bar css", you'll find a lot of pages that tell you how to create a floating box of links that stays in sight on the left or right-hand side of the page as the viewer scrolls up or down. Personally, I find such moving boxes intensely annoying. Apart from that, setting them up usually involves a fair amount of both CSS and JavaScript and brings you up against some tricky browser differences - a problem I discuss in Accomodating Browsers.

This page represents a different compromise. It uses simple CSS only, no JavaScript, to keep the links always in view at the top of the page as you scroll the rest of it up and down. What I'm doing here still has problems:

  • First, there's the fact that it uses CSS, so that the navigation won't display properly, or perhaps at all, in older browsers that don't know how to handle CSS.
  • Second, there's a distracting double scroll bar on the right-hand side which we seem to be stuck with.
  • Third, if you make your browser window really small while viewing this file, odd things happen.
  • Fourth, on browsers other than Internet Explorer, there's a superfluous horizontal scroll bar on the bottom, which we also can't get rid of.
  • Perhaps I should add: And fifth, as the previous point illustrates, the CSS I'm using behaves differently in different browsers.

Nonetheless, in case you want to use this method for your links (or for whatever you want to put at the top of the page and have always in view), here's how this works.

First, I set up the following CSS styles: 

<style type="text/css">
  #navbar {
    height: 5%;
	overflow: fixed;
  }
  #mainbody {
	height: 95%;
	overflow: scroll;
		overflow-x: hidden;
  }
</style>

Then I enclosed the navigation bar in a div named navbar and all of the remaining content of the page in a second div named mainbody.

In other words, the structure of the page looks like this: 

<html>

  <head>
    Various stuff that goes in the head section, such as the title.
  </head>

  <body>
  
    <div id="navbar">
      All the HTML for the line of links and the horizontal line 
      (an <hr> tag) just below it.
    </div>
	
    <div id="mainbody">
      All the HTML for main part of the page, the part that you 
      can scroll up and down.
    </div>
	
  </body>

</html>

So use this if you want to. Frankly, I don't think you should.

 


Google
 
Web www.dvorkin.com