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

[Jason Longdon]

George, way awesome sir! Many Thanks! I am starting to think It may not be optimal for my site however, because the top item in the submenu is under the second row of main tabs. Unless you've got a fix for this of course... And how could I center this? just play with the padding attribute?

[George H. Compton IV]

try this code right here it should all be Center and it's only one row so you won't have to worry about the Sub tabs... See I took a snapshot of your network with it virtually added with the style CSS sheet.

if it's not quite center in the white box used this portion of the code to move all the tabs left or right

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

Try the code underneath this picture

#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 {
   min-width: 935px;}
   
DIV#xg_navigation span {
  font-size:.60em;}

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

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

DIV#xg_navigation {
   margin-left:68px;}

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

H1#xg_sitename.xj_site_name {
   margin-top:75px;}

[Jason Longdon]

George, thank you so much for your advice and time! Your advice is great! You're a really smart and helpful guy...the two usually don't go hand in hand. I did have to make some adjustments however, because I do have a hidden tab only for members, but I think I got it. I'M Just not sure if it looks the same on everyone's screen as it does mine. Is there a way to hide the two images (the one below the navigation and below my header image...they just don't look right now with the navigation moved ) that come with the elegant theme, or do I need to find a different theme and continue to adjust it from there?  Have a great Sunday!

[George H. Compton IV]

You're welcome and thank you for the compliment :-)

use this for your margins it will keep everything a line with the ning bar

DIV#xg_navigation.xj_navigation{position:align:center!important;width: auto;left:75px;right:75px;}

and remove this line of code

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

And go head and add this for your sub tab issue

div.xg_subtab :hover{z-index:999999;}
DIV#xg_navigation.xj_navigation LI#xg_tab_xn7.xg_subtab, LI#xg_tab_xn8.xg_subtab, LI#xg_tab_xn12.xg_subtab, LI#xg_tab_xn13.xg_subtab, LI#xg_tab_xn14.xg_subtab, LI#xg_tab_xn15.xg_subtab, LI#xg_tab_xn16.xg_subtab, LI#xg_tab_xn18.xg_subtab, LI#xg_tab_xn19.xg_subtab, LI#xg_tab_xn20.xg_subtab, LI#xg_tab_xn17.xg_subtab, LI#xg_tab_xn9.xg_subtab, LI#xg_tab_xn10.xg_subtab, LI#xg_tab_xn11.xg_subtab{z-index:99;}

[dave]

I love your work here George :-)  Could you please tell me how to keep the style but not have it floating and the drop down tabs, can i speed up the transition of the display as i hover over each sub-tab

And which is the line of code that i can adjust to position the nav bar, I'm a learner.

Thanks George this is a great tip and thank you for sharing :-)

[George H. Compton IV]

thank you Dave :-)To make it the way you want it just Remove This code

DIV#xg_navigation { position:fixed !important;}

and to speed it up you can change the ease-out seconds in this line of code just add a period in front of the one and Change the .1 to anything between .1 and .9 will change the speed you can also slow it down by raising the number one to anything you want 10 for instance  or to removethe animation completely remove this line of code :-)

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

[dave]

Thank you very much George the nav bar looks great thanks to you :-)

[George H. Compton IV]

you're welcome :-) I suppose I should've gave you the whole code with all the unnecessary Padding and margins. all you need to do with this one since it's not fixed is just adjust the speed of the animation to your liking :-) you have a great day

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;
z-index:9;}

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

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

[George H. Compton IV]

Hello Dave this code right here will move the navigation bar up and down.

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

[dave]

Hi George, thank you very much for helping me,  I was wondering which browsers these new refinements don't show up in, i did look in a older version of safari..mind you not that old less than 12 months and they had not taken effect , they were just plain,  and in my latest version of mountain lion they were fine. Is there such a thing as to much CSS in that box :-)

I used some css to upload a background photo and this i think was making the site load really slow ..and other times it seemed fine.

Thanks again for you help George :-)

[George H. Compton IV]

really I'm not sure how many browsers it works in but I do know it does work in Safari download the latest version

it works in the latest Safari, Firefox, Google chrome and Internet Explorer 9

[dave]

Thanks George, i to am running Mountain lion now and it looks fine :-) your a talented guy with this css

Thanks again :-)