Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
The link sends me to a maintenance mode page. Can't see what I need to see to help. –  Drew Gourley Apr 18 '11 at 17:00
    
@Drew: Sorry, forgot to turn that off. It's viewable now. –  Diventato Apr 18 '11 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. –  Drew Gourley Apr 18 '11 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. –  Diventato Apr 18 '11 at 18:41
    
We must all unite against the hell-client, I'm with you –  Drew Gourley Apr 18 '11 at 18:45
show 3 more comments

1 Answer

up vote 0 down vote accepted

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>
<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.

share|improve this answer
    
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! –  Diventato Apr 18 '11 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. –  Drew Gourley Apr 18 '11 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. –  Diventato Apr 18 '11 at 20:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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