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

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

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

Favorite

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by George H. Compton IV on July 6, 2012 at 10:11am

you're welcome Badan :)

▶ Reply

Permalink Reply by George H. Compton IV on July 13, 2012 at 6:24pm

I added a second choice for The Ning bar.. the second one is a dark hover effect which I think will look better on your Network

▶ Reply

Permalink Reply by Armani Rouse on July 6, 2012 at 7:56am

Hello George! Very cool site, Ive visited friendly faces ;) this bar does what exactly because Ive visited your site and the gentlemans site below and didnt see anything regarding the navigation bar, I also already have the code for the notifications to show up in the top bar with the home button as well as the go to top button lol what I did see that was super awesome on your site is the latest activity module! how did you place rounded boaxes around them and you have it where the statuses are in a comic book like bubble! thats awesome and I would love the code for that to implement it on my site, but I want to use you ultimate bar as well I just dont see what the code does if I add this to my custom css, can you help me out bro?

▶ Reply

Permalink Reply by Armani Rouse on July 6, 2012 at 8:04am

ok, i added it just to see what it would do and it looks as though it created like a border around the notification links I already had at the top making the background of my page stand out a bit more, so its pretty cool, I'd like to overall decrease the amount of tabs I have on my site and make all of them cool notification links and icons my members could just click on, check out my site wellkunnected.com I want to minimize all the tabs in the current navigation and make the most used tabs little icons to add to the top of the bar I have now...and the code for the latest activity to go into comic book like bubbles would be awesome lol

▶ Reply

Permalink Reply by George H. Compton IV on July 6, 2012 at 10:18am

you ask 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. I've also shortened it so it doesn't reach across the whole page. Does that answer your question lol :-) and you also wanted the code for the latest activity here you go

.feed-story {
    border: 1px solid #E4E4E4!important;
    border-radius: 5px!important;
-webkit-border-radius: 5px!important;
-moz-border-radius: 5px!important;
    clear: both;
    min-height: 48px;
    padding:10px;
    position: relative;
    word-wrap: break-word;
margin:10px 0 20px 60px!important;
}
.xg_module_activity .feed-story-status .status-update{vertical-align:middle;color:#fff;border:1px solid #ccc;background-color:#14135e;border-radius:35px 75px 30px 67px;-moz-border-radius:35px 75px 30px 67px;-webkit-border-radius:35px 75px 30px 67px;-webkit-box-shadow:6px 6px 10px #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 5px 15px;padding:1em 2em;}
.xg_module_activity .feed-story-status .rich-detail{background:#333 url(http://api.ning.com:80/files/V89jqQsqrRMQ*dIR5LsCYRfRrymqkSXewrL70FSdB4i0YWnaXw*2A43JzOvLHW8cSP0TDD*246aw2tivWS9ls09t4udO0WPO/bubbles.png) no-repeat 0 8%;padding:0 1em 0 .8em;}

And if you'd like the comments in a bubble that match here's the code for that

/*Comments in bubble with arrow*/
dl.comment{
border:none!important;
max-width: 450px!important;
}

#comments dl.comment dd, #discussionReplies .discussion dd div.description, .xg_module_comment_wall dl.comment dd{
    background: #14135e;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-right: 35px !important;
    padding: 2px 5px 27px 10px;
margin-left:20px!important;
}

#comments dl.comment dd:before, #discussionReplies .discussion dd div.description:before, .xg_module_comment_wall dl.comment dd:before{
    background: url(http://api.ning.com:80/files/HFqCj2J1p5dDEhLE1YWO29om9ILqESN44Bg6dD...*ZHP9Un645KjUnEM37g4p/cornerright.png?c=290&v=201204022039) no-repeat scroll 5px 15px transparent;
    content: " ";
    display: block;
    height: 36px;
    margin-left: -33px;
    position: absolute;
    width: 37px;
}

.xg_widget_video_video_show .description, .xg_widget_photo_photo_show .description{
border:none!important;
}

You have a great day Armani :)

▶ Reply

Permalink Reply by Nisanth Satheesh+One Man Only+ on July 9, 2012 at 8:29pm

thanks

▶ Reply

Permalink Reply by Armani Rouse on July 13, 2012 at 9:12am

George youre the man bro! Thanks my members love the comic book like look! Im a vintage kinda guy myself so when I saw this on your site and being a 25 yr old young man with a HUGE Marvel and DC obsession I knew the comic book like comments and status post was necessary (lol) thansk so much my good man! You've truely made my day (dancing in circles) ...maybe that will be like a new "lol" instead DIC for dancing in circles! :)