I've bee experimenting with a site I'm working on. My client wants the header with its nav and logo intact, so visitors always have the ability to access the navbar while scrolling to read the page content. I have added fixed to my wrapper div and that keeps the background static, but in this design the background is also part of the header.

My page is http://axiomwest.com/client-services/

How can I achieve a fixed header area and allow scrolling only in the main content area?

  • The link sends me to a maintenance mode page. Can't see what I need to see to help. Commented Apr 18, 2011 at 17:00
  • @Drew: Sorry, forgot to turn that off. It's viewable now. Commented Apr 18, 2011 at 17:13
  • Never disable right click, ever, I don't care what the clients needs are, you are hindering usability. It also makes it hard to debug from my standpoint. I'm officially annoyed away from this project. Commented Apr 18, 2011 at 18:15
  • I can't win! Drew, you know the proverbial client from hell? Well, this is them. Just one of their annoying requests and I had to test a plugin for them. Please take another look into the static header as I have disabled the anti-right clicking plugin. I appreciate your patience. Commented Apr 18, 2011 at 18:41
  • We must all unite against the hell-client, I'm with you Commented Apr 18, 2011 at 18:45

1 Answer 1


Alright, what you'll need to do here is separate the header into it's own wrapper. What I did to get this to work is to close the #wrapper div right after you close the #header div and start a new div with the same class hfeed and a new ID other than wrapper.

Should look like this:

<div class="hfeed" id="wrapper">
    <div id="header">
        <div id="logo">...
        (stuff in here)
    </div><!-- #header -->
<div class="hfeed" id="wrapper-lower">
    <div id="main">
        <div id="container">...
        (so on, so forth)

Now if you apply position:fixed to the #wrapper element, you'll get the desired effect. You will still need to change the way your graphics work to really sell the effect. I might suggest using a .png where everything under the red line of the swoosh is transparent. The file size will be much bigger, but if this is the only large image you are using, you'll be fine.

Almost forgot! You'll also need to apply a top padding to #wrapper-lower in order to push it down past the fixed element. The padding-top of #wrapper-lower should be the same as the total height of #header.

  • Thanks Drew. I was thinking I would need to modify the layout a bit but I just wasn't sure of the smartest way to go about it. I'll test your method above and I'll let you know how it goes! Commented Apr 18, 2011 at 19:07
  • I got it working by editing your page locally via firebug, the optimal height of the top padding for #wrapper-lower is 320px. Commented Apr 18, 2011 at 19:09
  • It worked! Thanks again Drew. I'm using Contact Form 7 on this site and the form fields are not doing as the static text does... they just move up over the header as you scroll. I will mess with the style sheet for CF7 and see what happens with that. Commented Apr 18, 2011 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.