Trying to make my header fixed

  • Resolved fawkesblog2

    (@fawkesblog2)


    12 years, 4 months ago

    If yiu see my front page at http://www.chrisfawkes.net you will see i have created a scroll box of images. If you scroll the images the header and menu do not move.

    Then if you go to the blog at http://chrisfawkes.net/blog/the-blog/ when you scroll the header and menu move.

    I am able to fix the header and menu but then there is no space between the header and the post. That is the post start at the top of the screen with the header and menu over it.

    I then added top: 130px to the .post in style.css which only moves the post if i add position relative

    The problem is adding position relative now puts the header and menu behind the post. So the header and menu are fixed but the post run right over the top.

    I would love to simply have the header and menu fixed so to visitors the blog is congruent with the front (art prints) page.

    Can anyone help me out on this one. I’ve reverted back to what i had but feel like i am close to what i want but stumped as to what to do next.

    Cheers guys.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter fawkesblog2

    (@fawkesblog2)

    12 years, 4 months ago

    Ok i’m sorted.

    I had a couple of problems and i’ll quickly explain in case this is of use to anyone else.

    When i added position relative to the .post it also read the “top:130px; “but without the position relative it did not. I solved this by removing position relative and changing top:130px; to padding-top: 130px;

    I fixed the header but then found my comments still scrolled over it and the post behind it. The code i was using is #header { position:fixed; top:-2px; left:328px; z-index:000;}

    Note the last bit of that code is z-index:000; the index is for layering what is on your page. i guess 000 doesn’t mean less than one so i changed the code to #header { position:fixed; top:-2px; left:328px; z-index:1;} (1 being the top layer, 2 would be the second etc)

    Thread Starter fawkesblog2

    (@fawkesblog2)

    12 years, 4 months ago

    Ok just had to change #header { position:fixed; top:-2px; left:328px; z-index:000;}

    tp #header { position:fixed; top:-2px; z-index:000;}

    The left command was forcing the header into one spot and so looked different on different size browsers so i just removed it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trying to make my header fixed’ is closed to new replies.