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!

Tags: Ning, bar, hover, shadow

Views: 525

Reply to This

Replies to This Discussion

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?

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

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

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

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

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

what's a floating ning bar?

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

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.

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!

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;

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

RSS

Latest Activity

Gary W Norman replied to Gary W Norman's discussion 'Tagline Font Size or Type - can it be changed?'
"it all works James, thank you! but I tried clicking the little box and it takes me to my appearance…"
9 minutes ago
Strumelia replied to FedMedic's discussion '3.0 Why is all my text centered?'
"FedM- i replied to you in the 'Alternatives to Ning' thread, which is the proper place…"
19 minutes ago
Strumelia replied to PeruCool's discussion 'Alternatives to Ning social network'
"To FedMedic- (not wanting to continue that other hijack in the wrong thread, better it's…"
20 minutes ago
James Hawkins replied to Gary W Norman's discussion 'Tagline Font Size or Type - can it be changed?'
"If that doesn't work than let's do it the easy way. Open up the design editor. It's…"
25 minutes ago
Gary W Norman replied to Gary W Norman's discussion 'Tagline Font Size or Type - can it be changed?'
"...and here too! All the help is more appreciated than any of you will know. I'm most grateful…"
31 minutes ago
Gary W Norman replied to Gary W Norman's discussion 'Tagline Font Size or Type - can it be changed?'
"it works James! I put it closer to the top of the code and voila! all is well in the bearded world…"
32 minutes ago
Suzie Nielsen replied to Rodelio Lagahit's discussion 'have anyone tried grou.ps?'
"WOW! What a mess! Good Luck!"
41 minutes ago
Troy D. Bertrand replied to PeruCool's discussion 'Alternatives to Ning social network'
"I have an associate who went through the same thing. My advice to her was; Reclaim the account,…"
41 minutes ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service