How to Lock Your Navigation Bar to the Top of the Screen

Update – 17 July, 2012

In Thesis 1.8.4 the concept of ‘Design Mode’ was introduced.

If you make design or layout changes but they don’t show up when you check the front of your site, you’re probably not using Design Mode.

See how to fix it here.

Original article starts here:

I was asked recently by a client if it was possible to fix the navigation menu on a Thesis site to the top of the screen, so it was always visible to site visitors as they scrolled down the page.

The answer is ‘yes, it is’.

The process I’ve described here is for users of the Thesis Theme on WordPress, but I’ve included the variations you need to use for a normal, static site near the end – click here.

There’s a lot of articles online that will tell you how to create a menu box that sits off to one side of your content and slides down the page as you scroll, but a) I don’t like those and b) that’s not what I wanted.

A few articles claimed to have a solution to fixing the menu bar to the top of the page using the CSS overflow selector.

But even in their own examples, this solution produced an additional (and unnecessary) scroll bar on the right that could not be removed.

In my search for the solution, I’d been using the CSS position: fixed value for the header_area div.

While that did fix the header area (which, on the site in question, contained the navigation menu) to the top of the page, the content area moved up behind it so that the top few paragraphs of the page were obscured when the page first loaded.

This is because using the position: fixed value removes the element it’s applied to from the normal flow of the page.

You could think of it as like lifting the header area up from the page so it’s still visible, but everything slides up behind it into the space it’s left behind.

I needed to find a way of preventing the following divs from moving up and becoming obscured by the header area div.

The answer turned out to be simple: create a new div to fill the space left by the header area div, and place it immediately before the following div which, in my case, contained the content.

In other words you’re replacing the header area div with another div, in order to prevent the following divs from moving up.

How to fix your header area to the top of the page in Thesis

So, if you’re using Thesis, here are the steps to fix your header area (which, on the site in question, included the navigation menu) to the top of the page. In this example I’m using the full width layout:

Step 1:

In your custom.css file, add the position: fixed value to your header_area selector:

.custom #header_area { position: fixed; }

(If you already have other values specified for your header area div, simply add the position value to the end).

Step 2:

Add a new div to your custom.css file (we’ll call it ‘buffer’, since that’s what it is) and give it a height value (any value initially). This is the div that’s replacing the header area div:

.custom #buffer { height: 100px; }

Step 3:

Next, you need to get this new div into the HTML for your page in the correct location. To do that, add the new div to your thesis_hook_before_content_area hook (assuming you’re using the full width framework).

If you’re working with your custom functions file this is how:

function buffer_area() {
?>
<div id="buffer"></div>
<?php
}
add_action('thesis_hook_before_content_area','buffer_area');

Hit the Big Ass Save button.

Remember to take a full copy of your custom functions file before you make any changes and ensure you have FTP access to your site so you can upload the backup copy if it goes wrong!

You’ll get a fatal error (white screen of death) if you have just one bracket or semi-colon out of place.

If you’re using the Openhook plugin simply add:

<div id="buffer"></div>

… to the box beside the thesis_hook_before_content_area hook. Check ‘Execute PHP’ and hit the little save button.

Step 4:

Go back to your custom.css file and adjust the height of the new buffer div to push the following (content) div down until the layout of your site is as you want it.

Pretty simple, really.

Do you have a static (HTML) website?

If you’re working with a static HTML site, you can follow the same steps above except:

You can see the result here.

Caution!

A quick heads up: some browsers (particularly older IE browsers) handle the position selector differently, so you may get some odd looking results in different browsers. Be sure to check how your site looks, at least in the most common browsers.

If you’re using a contact form on WordPress you should check your contact page.

I found that the contact form plugin I’m using does not move up behind the header area. It obscures the header area as you scroll down and looks odd, so I’ve removed that functionality from that specific page (using a Thesis filter).

See the result of removing that functionality on only that page here.

For more tutorials on customising your Thesis design take a look through these articles, and if this article was useful please +1 or Tweet it via one of the buttons below

Cheers,

Filed in: Thesis Theme

Please share this article - I'm counting on you!
  Tweet