Tip: Add a hover effect to your floating Ning bar

[Glenn Lynch]

Hello NC! 

If you have a floating Ning bar, you will love this. This code will give your Ning bar a shadow effect so that it looks like its actually floating above your network's content, not just scraping your content when it follows your screen. 

Add this to your Advanced CSS:

#xn_bar {
position: fixed !important;
top: 0;
left: 0;
z-index: 9999;
bottom: 0;
-moz-box-shadow: 3px 3px 8px #dadada;
-webkit-box-shadow: 3px 3px 8px
#4d4d4d;
box-shadow: 3px 3px 8px
#4d4d4d;
padding-top: 0;
}

Enjoy the hover!

[Marcus Morais]

Great!

Thanks a lot!

BTW, anyone know why YouTube videos are on ning bar, even though the z-index has been defined as 9999?

There are how to fix this?

[Marcus Morais]

One detail: in IE and Firefox the video is below the bar, only in Google Chrome is over.

[Alessandro Sporleder]

Worked fine for my network, tested on Safari, Firefox and Chrome. 

Maybe due that I don't use flash content as Glenn alerted.

[Glenn Lynch]

This happens in chrome always when there is adobe flash content on your network. It happens to me 2! :(

[Alessandro Sporleder]

Nice, code added to my site! Thanks for sharing it!

[Luciano Costa]

what's a floating ning bar?

[Alessandro Sporleder]

[Luciano Costa]

Thank you Alessandro, but I don't get it. Isn't the ning bar already positioned or floating at the top? Isn't that standard?  Take a look at my site and let me know. www.socalsocialclub.com

[Alessandro Sporleder]

Yes, the position of Nig bar at top is standard. The tip of this post from Glenn Lynch with the code he posted is to have a shadow at the bottom of this Ning bar. I noticed your site has a black background, maybe the reason that you didn't notice the shadow.

You may trying working with other colors, changing the hex code #4d4d4d to another one, but I'm not sure you will get a cool effect with other colors.

[Jorge Nava]

I've got two questions:

1. How did you put some links on the floating bar?
2. When i put this code to make it floating..it is positioned a little bit over my header image..how can i correct that? 

Thank you!

[Alessandro Sporleder]

1. I used the following tip to move the account box to the floating bar: 

http://creators.ning.com/forum/topics/add-member-account-box-links-...

There's also this other interesting tip to put links in the floating bar:

http://creators.ning.com/forum/topics/add-links-to-ning-bar-1

2. Maybe you'll be able to adjust the bar position changing one of these values from the code of this post:

top: 0;
bottom: 0;
padding-top: 0;

[Yio Capi]

lol Alessandro, What code did you use for the buttons start and return to the top? very very cool! Greetings