Update-v3 Tip styled, animated and floating Navigation tabs That scroll with you down the page

[George H. Compton IV]

I've never seen this on Ning before so I had to try and yes it works perfectly.

Just place this code in your design studio advanced CSS box it will create the floating Tabs for all Pages except profiles that have changed their themes.  any profile that has not changed the original theme will still have the floating tabs. 

And if you would like to not have the tabs float down the page with you but keep the animation just remove the top line of code. that will also allow you to use it on your whole network so you can put it in your NC custom code box or style sheet.

You can also use this code for individual profiles just place the code in your design studio advanced CSS box on your profile.

For whole networks using the same theme that doesn't allow members to change themes on their profiles you can put this code in your NC custom code box or style sheet.

To adjust the height of your tabs changed the percentage on the very top line of code.Lower the number to Raise the tabs.  It looks like this 

DIV#xg_navigation{
    z-index: 99 !important;
    position: fixed;
    top: 5%;
    max-Width:975px!important;}    

If needed Place the bottom four lines of code in one at a time starting with the bottom one  it just may be the only one you need the other Three codes are to adjust the height of your header site name and such to get it to look right with your theme.

And if you would like your Ning bar to float down with It just add this code

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

Or Use my tip the ultimate Ning bar  "tip" The ultimate NINGBAR Two choices Light or dark Hover affects

 If you would like to keep the styles and animation but not have it float down the page with you just remove the top line of code.This way the code can be put in your NC custom code box or a style sheet.  This is the top line of code you would need to remove.

DIV#xg_navigation{
    z-index: 99 !important;
    position: fixed;
    top: 5%;
    max-Width:975px!important;}

use this code to adjust the sub tab font size.  Just add it to the bottom of the main code below.                      #xg_navigation ul div.xg_subtab ul li a {font-size:.75em!important; }

 

After everything Is adjusted go to your design studio and select your font colors/size, tab Backgrounds and sub tab Backgrounds.  I prefer transparent for everything except when hovering over it with the mouse.

to reduce the size of the tabs just lower your font size in the design studio. Enjoy the code

If you have any questions or problems don't be afraid to ask it's an easy fix guaranteed LOL

If you would like me to adjust the code for your Network I would be more than happy to do that for you.

When all said and done it will look something like this :-)

 

DIV#xg_navigation{
    z-index: 99 !important;
    position: fixed;
    top: 5%;
    max-Width:975px!important;}
DIV#xg_navigation a :hover {
   -moz-border-radius:47px 41px 147px 25px;
   -webkit-border-radius:47px 41px 147px 25px;
   border-radius:47px 41px 147px 25px;
   -webkit-transition:all 1s ease-out;
   -moz-transition:all 1s ease-out;}
DIV#xg_navigation UL.xg_subtab {
   border-radius:21px 60px 8px 45px;
   border:0px solid #aaa!important;
   -moz-border-radius:21px 60px 8px 45px;
   -webkit-border-radius:21px 60px 8px 45px;}
DIV#xg_navigation UL.xg_subtab :hover {
   -moz-border-radius:47px 41px 147px 25px;
   -webkit-border-radius:47px 41px 147px 25px;
   border-radius:47px 41px 147px 25px;
   -webkit-transition:all 1s ease-out;
   -moz-transition:all 1s ease-out;}
DIV#xg_navigation {    text-align:center;
z-index:9;text-align:center!important;}
DIV#xg_navigation ul { width:auto!important;position:align:center!important;}
DIV#xg_navigation ul li{position: relative!important;}
DIV#xg_navigation ul { border-radius:21px 21px 21px 21px;
   border:0px solid #aaa!important;
   -moz-border-radius:21px 21px 21px 21px;
   -webkit-border-radius:21px 21px 21px 21px; }
#xg_navigation ul div.xg_subtab ul li a :hover {
   -moz-border-radius:47px 41px 147px 25px;
   -webkit-border-radius:47px 41px 147px 25px;
   border-radius:47px 41px 147px 25px;
   -webkit-transition:all 1s ease-out;
   -moz-transition:all 1s ease-out;}
#xg_navigation ul div.xg_subtab ul li a {min-width: 155px!important;}
DIV#xg_navigation a  {
   border: 1px solid #E4E4E4!important;
   border-radius:21px 60px 8px 45px;
   border:1px solid #aaa!important;
   -moz-border-radius:21px 60px 8px 45px;
   -webkit-border-radius:21px 60px 8px 45px;
   #ccc;-moz-box-shadow:6px 6px 10px
   #ccc;box-shadow:6px 6px 10px
   #ccc;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
   filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
   padding-left:11px!important;
   padding-right:11px!important;
   padding-top:1px!important;
   padding-bottom:1px!important;}
DIV#xg_navigation a {
   padding-left:5px;
   padding-right:5px;}
DIV#xg_navigation .xg_subtab {
   margin-left:0px;
   margin-right:2px;
   min-width: 95px!important;}
DIV#xg_navigation span { padding:4px;text-align:cnter!important;}
DIV#xg_navigation a{padding-left:1111px;}

this code is to remove the borders and background from your tabs.

DIV#xg_navigation{
    border:none!important;
    background:none!important;}

 

These are the four codes that were mentioned above.. start with the bottom code it will adjust the height /position of your navigation tabs you want them up as close to the Ning bar As possible it might be the only one you need to use put it in at the same time as the code above. if you need the tabs to go higher just lower the number if you reach zero before you're up high enough just to add a - In front of the number then start raising the number.

 

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

#xg_masthead {
   margin-top:30px!important;
}

DIV#xg_ad_above_header.xg_ad.xj_ad_above_header{
   margin-top:30px!important;
}

body{
    margin-top:49px!important;
 }

for a different sub tab Animation tri this super cool Subtab animation.  It makes an awesome plug-in for my tabs. Thank you soaringeagle for the plug-in

super cool subtabs

Posted by soaringeagle on August 21, 2012 at 8:21pm

click here for the plug-in

 

see it here live

see it here live on well kunnected

Or here or on Cross Roads Fellowship

[George H. Compton IV]

great thank you for That information now I know it runs in mountain lion as well :-) you're welcome and you have a great day Dave

[Jim Kinson]

So glad I checked into the floating tabs for my network. It looks great, works great and I met a great friend. What could be better. Thanks George for all your time creating these features and the time and patience that you have spent with me and others. Blessings my friend, Jim

[George H. Compton IV]

you're so very welcome Jim you know if there's anything you need I'm there for you :-)

[john s.]

I'm more interested in how you moved your alerts, inbox, settings etc into the Ning bar at the top of your page? I would like to move notifications etc to the Ning bar too.

John s.

[Jim Kinson]

John, I had George work that in for me and I love it. It looks good and frees up room on the page also. It did take me a while to think of looking up top for different things, but well worth the change.

[George H. Compton IV]

here's the link to the script.  Just highlight and copy the script and paste it in your nc custom code box

click here for the script

[john s.]

hey george,

just pasted the code, so far it works...i have a question for you, when you get an alert or mail, do the icons change or show that you have new mail or alerts?

thanks,

john s

[George H. Compton IV]

yes they do and you can Thank Jen for That awesome script..

Add Member Account Box Links/Notifications to NingBar
Posted by Jen on March 30, 2012 at 3:33pm click here

[john s.]

it works, just wish PUSH was enabled, because you have to refresh page until you see you have mail.  I just tested it, also it would be good if the icons changed into red when you received a notification. Thanks Jen!

john s.

[George H. Compton IV]

that would be some nice features for her to add to This script. very good idea  John I'll mentioned that to her and if she can figure it out I'll let you know.

You have a great day John

[Intimate StRaNgEr]

Hi george..,

its a wonderfull idea..

i tried it in my site but the floating tabs go above the header..,

but i want to keep the floating tabs just below the header..

can you help me out...?? thanks george..

[George H. Compton IV]

hello stranger :-)

Of course I can't help :-)

you can use this code to make the tabs go up or down.

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

just raise the number 25 to the Height desired. the higher You raise the number The lower the tabs will be on the page.

if you would like you can send me the link to the network and I can figure it out for you :-)