Fixed logo

[nikki712]

I want my logo to be "fixed" at the top of the page so that when users scroll, the page scrolls but the logo in the header is still visible. Is it possible to do this, and if so, how would I do it?

[josephu]

umm yeah, Im resurrecting this 2 year old thread, can anyone point me in the right direction?

[BirdOPrey5]

This could be done by adapting a javascript file, a free one is available here:
http://javascript.internet.com/image-effects/persistent-layer.html

You put your logo in the <DIV> this script wants you to create.

[CoffeeLovesYou]

This could be done by adapting a javascript file, a free one is available here:
http://javascript.internet.com/image-effects/persistent-layer.html

You put your logo in the <DIV> this script wants you to create.
This didn't work.
All it did was make the logo scroll with the page (which is right in a way) but I want it to be so the whole HEADER stays at the top, and just the forums scroll.
So like, right now, if you scroll down, your header image is showing up on top of the forums. I want to split it so the Header stays at the top, and the rest of the forums only scroll. I don't want the logo to float on top.

[BirdOPrey5]

Hmm... no need for a JavaScript these days, guess I learned something in the 2 years since I made that last reply...

It's going to take some custom editing to get it to work/look right but I believe what you want is the CSS property: position:fixed;

You will need to edit the header template and add this property to the main <div>. You're also going to need to do something to push the whole page down by as much as the header takes up in height because making it position:fixed will effectively remove it from the main layer and the top of the forum will start behind it. You'll need to fill it with empty space.

[CoffeeLovesYou]

Sorry, I didn't want to make a new thread when this asks the same exact question, lol :)
I have tried position:fixed; already, but I don't like how it floats over everything.
Then, I added <div style="overflow:hidden;margin-top:150px"> after $header in the FORUMHOME template, but after I started to scroll down, the header went back to still floating on top.

ugh.