Tip: Floating Ning Bar

[Ron]

Hi all NCs,

Make your Ning bar follow by fixing it in its position. Similar to the sites here:

http://www.factface.me/

http://www.iyoume.net/

Add this to your CSS Code

#xn_bar { position: fixed !important; top:0;left:0; z-index: 9999; }

 

Update:If these changes made your header or ads above overlap or cutoff, apply some top margin to your header CSS:

#xg_head { margin-top:100px !important; }

 

If you have a layout that has the navigation tabs above header..

#xg_navigation { margin-top:100px !important; }

 

or if you have an ad above header box

.xj_ad_above_header { margin-top: 100px !important; }

 

Adjust the margin top value pixel (100px) accordingly..

cheers.

[Eric Suesz]

Nice one!

[Ron]

Thanks Eric!

[Armani Rouse]

Hey ron, great tip but for some reason I dont get anything when I place that code into the advanced css section of my design studio, Id really like to have this navigation bar! Any help would be appreciated

[Ron]

Thanks Armani, I checked your site and looks like it's working now--

[Bernard Lama]

Great...

-------------------------------------------------

Please consider the environment before printing this content.

[Ron]

cheers Bernard.

[Jordon McGee (Jords)]

Swweet!!

[Ron]

hey, glad you like this Jords.

[Jordon McGee (Jords)]

It's a great tip! Saw it done with script once but seeing this is css that's even better =]

[Ron]

Thanks and I agree with you. Technically, this can really be done by pure CSS. We only use JS code when needed and if CSS cannot pull it off ;-)

have a great weekend.

[Ari Kalos]

I love this tip, the only problem is it makes the Admin "Edit" disappear on my top page Ad box, and then when I sign out, it bumps my ads all the way up against the Ning bar. If I could figure those 2 issues out this will be perfect for me. If anyone has suggestions please let me know.

[Thiago Santos de Moraes]

Yes, I loved this too, but it makes the space between the bar and the header disappear.