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

by Martin Malden

Note pinned to top. 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:

  1. In your stylesheet, add the position: fixed; declaration to the attributes of the div in which your menu (navigation) bar is sitting – it will probably be named something like top_nav or navbar
  2. Also in your stylesheet, add the new ‘buffer’ div selector and give it an initial height
  3. Instead of following step 3 above (which is specific to Thesis), add the buffer div into the HTML for the page immediately after the div in which your navigation bar is sitting and before the following div. This is the div that will replace your navigation bar div and prevent the following divs from moving up behind it (see the more detailed explanation above)

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,

Martin Malden.

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.
Eric August 18, 2011 at 8:02 pm

Hey dude,
Nice use of Thesis hooks and CSS here.

Another thing you might want to try is, instead of adding another div to the mix, you could add a “margin-top” with a value equal to the header height to the Content CSS declaration.

But I like you method using hooks because it let’s you activate it only on pages/posts where it is needed.

Martin August 19, 2011 at 6:58 am

Thanks Dude,

Actually, adding a margin to the top of the content div was my first port of call, but it pushed the fixed header area div down as well as the content div.

The reason I love the W3Schools site is they have those sandboxes which enable you to edit the code in the examples they give to see the effects of changing things. Playing around there is what led me to the solution.

Cheers,

M.

Rita August 23, 2011 at 12:06 am

Mr. Martin as usual a brilliant one.

Martin August 23, 2011 at 7:09 am

Glad it was helpful!

Cheers,

Martin.

Richard Louthan February 7, 2012 at 8:27 pm

I still cannot get the meno bar at top of screen

Martin February 8, 2012 at 8:29 am

I’ll need a few more details before I can make any suggestions.

Cheers,

Martin.

Richard Louthan February 7, 2012 at 8:30 pm

I did not get a reply

Martin February 8, 2012 at 8:31 am

Hmmm – this comment was posted 3 minutes after your first comment and it happened to be in the middle of my night here.

Nonetheless, as per my previous response, I’ll need a few more details before I can make any suggestions.

Tha man February 27, 2012 at 8:22 am

Thanks man you saved my life!.

Martin February 27, 2012 at 10:43 am

You’re welcome!

Cheers,

Martin.

ashfaqur March 13, 2012 at 1:35 pm

Thanks for your tutorial. I want something exactly like http://pinterest.com/ . Just like your example everything will be same , header will disappear and menu will be stick at the top . Can you help ?

Martin March 13, 2012 at 6:51 pm

If you install Firebug (which I wrote about here) and then use the ‘inspect’ tool on that Pinterest page you will see exactly how they’ve created that effect using CSS.

Cheers,

Martin.

ashfaqur March 13, 2012 at 6:59 pm

I have looked into it but it looks very much complex , that’s why I asked for your help , if there is any way that can make header scroll few pixel and then stick :). They might didn’t used any script for it . But as a newbie I couldn’t utilize firebug . If you can just tell me in sort what they did that can save my life

Thanks

Martin March 13, 2012 at 7:53 pm

Install Firebug, go to the Pinterest page and, initially, use the inspect tool to identify the top div and then the div below it that contains the menu div (note that there are two divs there, one inside the other).

Click inside the top div, which will lock it, and then go to the CSS panel on the right of the Firebug window and copy the relevant CSS code. Paste it into a Notepad file.

Then do the same with the div that contains the navigation menu div. Note that you’ll need to click the full width div, not the interior div that contains the menu. Lock it in the same way as before, go to the CSS panel on the right and copy the relevant code.

That will give you the code you need and you can then adjust the attributes to fit what you want to do.

Finally, paste the code into your Stylesheet and make sure that the divs you want to lock have the same names as those in your stylesheet.

Cheers,

Martin.

Carlos July 6, 2012 at 6:01 am

Couldn’t get this to work for me. I’m using thesis but I’m using a different plugin for the menu. This is the code that brings in the menu plugin

remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘shailan_dropdown_menu’);

Carlos July 6, 2012 at 6:02 am

I had trigger happy fingers. Meant to say thanks in advance for the help!

C

Martin July 6, 2012 at 7:40 am

Welcome!

Martin July 6, 2012 at 7:37 am

Hi Carlos,

I don’t use that plugin, so I don’t know, but you’ll probably find that it creates its own divs and/or its own stylesheet. If so, you’ll need to identify those (or that) and place your position: fixed; attribute in the appropriate place.

Remember, also, that the code I gave above is based on using the full-width framework. If you’re using the page framework, and the Thesis menu, you should place your position: fixed; in the .menu class.

Purely out of my curiosity, why do you use that plugin when both the Thesis and the WordPress menus offer fully styleable drop downs..?

Cheers,

Martin.

Matt August 5, 2012 at 2:33 pm

Hi there,

Thanks heaps for this great advice. I’m trying to make the header area higher, like this:

.custom #header_area { position: fixed; height: 200px; }

It doesn’t seem to work… any suggestions?

Thanks again,

Matt.

Matt August 5, 2012 at 2:59 pm

Hi again,

Just wondering also if you have any suggestions of how to add a a horizontal line at the bottom of the header area to distinguish it from scrollable content…

my wip site is mattangel.com.au

Many cheers,

Matt.

Martin Malden August 6, 2012 at 12:28 pm

Hi Matt,

To add a border to the bottom of your header area just add this to custom.css:

.custom #header_area { border-bottom-style: solid; border-bottom-color: #000000; border-bottom-width: 1px; }

You can change the colour of your border by changing the hex code, and you can change the width by changing the 1px to whatever you like.

I can’t see anything wrong with your header_area height code. You could try using min-height as the attribute, but the way you’ve got it should work.

Cheers,

Martin.

Matt August 7, 2012 at 2:45 pm

Hi Martin,

Thanks so much for your help. Much appreciated, it makes more sense now and I pretty much have it working as I’d like.

The only thing I have noticed is that both images and hr elements actually appear ‘above’ (as in overlaid) the fixed header area!

Any ideas? I’m guessing this has to do with the way thesis layers different areas of the site.

Cheers!

Matt.

Martin Malden August 7, 2012 at 3:55 pm

If you used images for those HR tags you may want to make them background images or, alternatively, give them a z-index value.

As I mentioned in the article, I had a similar problem with the contact form I use but, since it was only on one page, I simply removed the fixed header for that page.

Cheers,

Martin.

dirk pult August 9, 2012 at 2:22 am

Hello Martin,
many thanks for the fixed header function, I use it in my full width framework. It works so far for the navigation, but the logo, I placed in the thesis header will be ignored (it moves to the back by scrolling.
Do you have a solution for me to also have the logo in the header all the time in front?

Bye,
dirk

Martin Malden August 9, 2012 at 8:26 am

Hi Dirk,

Without seeing your site I can’t offer much help!

The logo would just be an image that you place in your header or header_area div, same as the header image that I have on the site I linked to. You may want to try making your logo a background image to see if that helps.

Cheers,

Martin.

Mr T. August 13, 2012 at 4:32 am

Help. Martin: I’ve tried everything to get my content area from scrolling up behind the header. I am not using thesis but I’ve tried to go by the steps you listed on your site (instead of using step 4).

Do I need to use functions in order to get this done (as you can see I am a newbie so I am looking for as basic code as I can find).

By the way, I’ve gone to many sites for help on this problem and I can’t seem to get anything accomplished.

I am really at a lost in overcoming this obstacle.

Thanks,
Mr. T.

Martin Malden August 13, 2012 at 7:01 am

You don’t need to use functions unless you’re doing it on WordPress (or another CMS). The only reason I used a function was to get the extra div (the buffer div I referred to in the article) into the code for the page.

If you’re doing this on a plain HTML site you will need to manually add the buffer div into the code for each page, and you would do that in the same way as I described for the version where you’re using the Thesis OpenHook plugin – i.e. just add <div id="buffer"></div> into the HTML for your page to replace the div that you’re ‘fixing’.

Cheers,

Martin.

Comments on this entry are closed.

Previous post:

Next post: