Header moves but content stays fixed

  • I am using a fluid theme for my site (niukita 1.0 – https://themes.wordpress.net/?s=niukita). My current problem is that the header and navbar and header image all move when the window is resized, but the content stays put. So unless you look at the site in full screen mode, it looks stupid.

    Originally they were all moving, header and navbar and content, over top of a fixed background. I added a max-width: 800px for the header and navbar and also in the #wrap{} that’s right after body near the top of the stylesheet, and after that the content stayed put but the header and navbar still move. I also tried to put position:fixed for the header and navbar but that screwed everything up.

    What should i do? I am new to this and have been using forum topics to help me with various problems, but I can’t seem to find a fix for this one.

    Thank you!!

Viewing 3 replies - 1 through 3 (of 3 total)

  • It would help a lot if you had a link to your site so we could see the exact problem. But, if this theme is giving you this much grief, cut your losses and go with another one.

    Thread Starter clb5j

    (@clb5j)

    here is my site…
    i thought about going with another one but i like the look of the site now. we’ll see.

    any help would be much appreciated – thank you!

    From your style.css (cleaned up by putting each declaration on a new line):

    #wrap {
width: 100%;
min-width: 600px;
max-width: 800px;
background:  transparent;
color: #333;
font-size: 11px;
font-family: Tahoma, Helvetica, Sans-Serif;
margin: 0 0 0 320px;
padding: 0;}

    Your posts and sidebar are inside the #wrap div. Currently, its left margin is set to 320px (the final number in the margin declaration), which means that its content will always be 320 pixels from the left edge. However, you have width declarations. The min-width setting is forcing the #wrap div to always be at least 600 pixels wide, even if the browser window is smaller than that.

    A fluid (or liquid) layout in web design means that at least part of the content of a page varies in size depending on the size of the browser window (namely the width). Basically, by adding the min-width declaration, you removed the fluidity from your theme.

    The margin, width, min-width, max-width declarations are the ones you’ll have to tweak. I’d drop the min- and max- width declarations.

    And, I’d definitely drop the left margin of 320 pixels as this would make your theme much more friendly to normal sized monitors (i.e., 1024 pixel width).

    Consider using Firefox with the Firebug extension. That extension allows you to inspect the CSS style of any element and turn off specific declarations.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header moves but content stays fixed’ is closed to new replies.