"tip" The ultimate NINGBAR Two choices Light or dark Hover affects

[George H. Compton IV]

This ningbar took me about two hours to put together.  I've seen a lot of different versions of these but I took The best ideas out of all of them and made the ultimate NINGBAR.

What the Ningbar does, it's fixed so it will scroll down the page with you, it's highlighted, rounded search query, and it's transparent.

You can use it on a single Profile just put the code in your design studio or Put the code in your NC custom code box or stylesheet for your entire network..

 

click here to see it live

 

 

Light Hover effect  for dark Themed networks

<style>

#cse-search-box input,#xn_bar_menu_search_query{border:0 none!important;
   border-radius:12px 12px 12px 12px;
   -moz-border-radius:12px;
   -webkit-border-radius:12px 12px 12px 12px;
   -moz-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   -webkit-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   outline:0 none;padding:5px 9px!important;width:135px!important;}
   #xn_bar{ height: 20px!important;position: fixed !important;position:align:center!important;
     z-index: 9999;background-color:#4a4a4a!important;top: 0;
   border-bottom:3px solid #ccc;border-top:0 solid #ccc;bottom:0;
   -moz-box-shadow:0 3px 18px #ccc;-webkit-box-shadow:0 3px 18px #ccc;
   box-shadow:0 3px 18px #ccc;height:20px;opacity:0.84;padding-bottom:8px;}
   #xn_bar #xn_bar_menu a{color:#fff!important;}
   DIV#xg_themebody{margin-top:30px;}
</style>

Dark Hover effect for Brite Themed networks

<style>

#cse-search-box input,#xn_bar_menu_search_query{border:0 none!important;
   border-radius:12px 12px 12px 12px;
   -moz-border-radius:12px;
   -webkit-border-radius:12px 12px 12px 12px;
   -moz-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   -webkit-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   outline:0 none;padding:5px 9px!important;width:135px!important;}
   #xn_bar{ height: 20px!important;position: fixed !important;position:align:center!important;
     z-index: 9999;background-color:#4a4a4a!important;top: 0;
   border-bottom:3px solid #ccc;border-top:0 solid #4d4d4d;
   -moz-box-shadow:0 3px 18px #4d4d4d;-webkit-box-shadow:0 3px 18px #4d4d4d;
   box-shadow:0 3px 18px #4d4d4d;height:20px;opacity:0.84;padding-bottom:8px;}
   #xn_bar #xn_bar_menu a{color:#fff!important;}
   DIV#xg_themebody{margin-top:30px;}

</style>

you can also add some beautiful animation using my discussions

animated ning bar!! HTML-CSS

Six colors to choose from all with the same animation pick your color then add the corresponding code to your NC custom code box or an ad b…

Started by George H. Compton IV in Add a Tip for Other Network Creators

And to finish it all off add these two awesome scripts

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

Add Home and Back to Top button on Ning Bar
Posted by Glenn Lynch on April 24, 2012 at 7:08pm click here

[George H. Compton IV]

I'm working on it I'm having a tough time but that would be cool.  Great idea

[Troy D. Bertrand]

Super sweet. Killer Codes!

[George H. Compton IV]

thanks Troy :-)

[George H. Compton IV]

you're welcome DJ