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

[Jim Kinson]

Hello George, I really like the look of this. I tried it on my site, but didn't work. Is it only for 2 column set ups or should it also work on a 3 column? Thanks and great work. Jim

[George H. Compton IV]

hello Jim there is a difference between a lot of sites is your site Named God expression?  If so this code will work perfectly for you.. I also updated the code above to be more compatible with all sites :-) thank you for bringing that to my attention.

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;}

#xg_navigation ul {
   text-align: center;
   margin: 0 auto;
}

#xg_navigation ul li {
   display: -moz-inline-box; /* inline-block for earlier versions of FF */
   -moz-box-orient: vertical; /* inline-block for earlier versions of FF */
   display: inline-block;
   vertical-align: middle;
   *display: inline; /* ie7+ hack */
   *vertical-align: center; /* ie7+ hack */
   text-align: center;
   float: center;
}

DIV#xg_navigation {    text-align:center;
}

DIV#xg_navigation li { width:auto!important;position:align:center!important;
   top:0;left:+0px;right:0px; z-index: 9999;
}

DIV#xg_navigation { position:fixed !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;}

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');
   margin:0 0 0px 0px;padding:1em 2em;
   clear: both;
   min-height: 3px; padding:2px;
   min-width: 55px; padding:2px;
   position: relative;
   word-wrap: break-word;
   margin:0px 0 0px 0px!important;}

DIV#xg_navigation a {
   padding-left:5px;
   padding-right:5px;
}

DIV#xg_navigation .xg_subtab {
   margin-left:0px;
   margin-right:2px;}

DIV#xg_navigation span { padding:4px;}

DIV#xg_navigation {
   max-width: 985px;}

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

DIV#xg_body{
   margin-top:79px!important;
}

DIV#xg_navigation {
   margin-top:-95px;}

[Jim Kinson]

Thanks George, the site is Cross Roads Fellowship 4himalone.ning.com. I tried the code that you had here, but didn't work. When I went to your site, I noticed that yours is a 2 column. I will try this new code and see what happens. Thanks again, Jim

[George H. Compton IV]

change the bottom line to Of this code to this

DIV#xg_navigation {
   margin-top:-275px;}

  it doesn't matter about the columns it was the first line in all the codes. I reduce the first line From this DIV#xg_navigation.xj_navigation To this DIV#xg_navigation.  It will work on just about any site

for the site crossroads Fellowship use this code. I set it up just for your site

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;}

#xg_navigation ul {
   text-align: center;
   margin: 0 auto;
}

#xg_navigation ul li {
   display: -moz-inline-box; /* inline-block for earlier versions of FF */
   -moz-box-orient: vertical; /* inline-block for earlier versions of FF */
   display: inline-block;
   vertical-align: middle;
   *display: inline; /* ie7+ hack */
   *vertical-align: center; /* ie7+ hack */
   text-align: center;
   float: center;
}

DIV#xg_navigation {    text-align:center;
}

DIV#xg_navigation li { width:auto!important;position:align:center!important;
   top:0;left:+0px;right:0px; z-index: 9999;
}

DIV#xg_navigation { position:fixed !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;}

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');
   margin:0 0 0px 0px;padding:1em 2em;
   clear: both;
   min-height: 3px; padding:2px;
   min-width: 55px; padding:2px;
   position: relative;
   word-wrap: break-word;
   margin:0px 0 0px 0px!important;}

DIV#xg_navigation a {
   padding-left:5px;
   padding-right:5px;
}

DIV#xg_navigation .xg_subtab {
   margin-left:0px;
   margin-right:2px;}

DIV#xg_navigation span { padding:4px;}

DIV#xg_navigation {
   max-width: 985px;}

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

DIV#xg_body{
   margin-top:0px!important;
}

DIV#xg_navigation {
   margin-top:-275px;}

and if you want your ning bar to float with it just let me know I can make it happen :-)

[Jim Kinson]

Thanks again, George. I would like the floating ning bar, as I like the looks and saves time scrolling all the way back to the top of the page.

I tried the new code and doesn't seem to work I am new at using codes like this. Is there anything else that I have to do, or changes in settings prior to adding this code?. Thanks for your patience. 

[George H. Compton IV]

try this when you add it to your design studio put this in front of the code <style> and this behind the code </style> and make sure you put this at the bottom of your design studio underneath any other codes

here's the new code with the floating ning bar and the <style> added

<style>

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

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;}

#xg_navigation ul {
   text-align: center;
   margin: 0 auto;
}

#xg_navigation ul li {
   display: -moz-inline-box; /* inline-block for earlier versions of FF */
   -moz-box-orient: vertical; /* inline-block for earlier versions of FF */
   display: inline-block;
   vertical-align: middle;
   *display: inline; /* ie7+ hack */
   *vertical-align: center; /* ie7+ hack */
   text-align: center;
   float: center;
}

DIV#xg_navigation {    text-align:center;
}

DIV#xg_navigation li { width:auto!important;position:align:center!important;
   top:0;left:+0px;right:0px; z-index: 9999;
}

DIV#xg_navigation { position:fixed !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;}

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');
   margin:0 0 0px 0px;padding:1em 2em;
   clear: both;
   min-height: 3px; padding:2px;
   min-width: 55px; padding:2px;
   position: relative;
   word-wrap: break-word;
   margin:0px 0 0px 0px!important;}

DIV#xg_navigation a {
   padding-left:5px;
   padding-right:5px;
}

DIV#xg_navigation .xg_subtab {
   margin-left:0px;
   margin-right:2px;}

DIV#xg_navigation span { padding:4px;}

DIV#xg_navigation {
   max-width: 985px;}

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

DIV#xg_body{
   margin-top:0px!important;
}

DIV#xg_navigation {
   margin-top:-255px;}

</style>

here's a snapshot of what it looks like on your site fully Implemented

Reduce the size of your tab font to make it fit better

[Jim Kinson]

George, Thanks so much. I now have the floating Ning bar. Still a no go with the other.

[George H. Compton IV]

I was just at your site it's working perfectly on your site :-)

It looks great but to make it look a little better replace the seven lines at the bottom with these

DIV#xg_navigation a {
   padding-left:5px;
   padding-right:5px;
}

DIV#xg_navigation .xg_subtab {
   margin-left:-4px;
   margin-right:2px;}

DIV#xg_navigation span { padding:4px;}

DIV#xg_navigation {
   max-width: 985px;}

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

DIV#xg_body{
   margin-top:0px!important;
}

DIV#xg_navigation {
   margin-top:-255px;}

[Jim Kinson]

Sent you a friend request here and yes please come to CRF, if you don't mind. I am so new at the custom codes stuff,yet would like to see my network have the looks like others here. Thank you George, Jim

[George H. Compton IV]

I just created an account on your network with the name George Compton.

I would be glad to help you out in any way I can.

thank you for the friends request Jim. :)