Customize the Ning Navigation Menu Bar: Add Background Images to Menu Bar and Menu Tabs (Hover & Active), and Menu Bar Divider

Have you ever wanted to make your menu tabs unique, by adding a special background image? This Tutorial will not only show you how to add images to your menu tabs, it will show you all of the critical CSS classes and attributes that control your Ning Menu Navigation and Menu Tabs.

To add a background image for a menu tab, use the same code as in this Tutorial for "Add Background Color to Main Menu Tabs" - - except, you will replace the background-color with background-image. You need some basic understanding of CSS and uploading images to utilize this Tip.

It will take practice to customize your menu and tabs. There are many different variables involved to do this. This Tutorial will give you a good start, and the groundwork to build upon. Any example code given here will need to be added to your Ning Network CSS, via Manage/Appearance/Advanced CSS.

What kind of images do you need?
  1. Background image to fill entire Width/Height of Navigation Bar.This is the area in the far background of menu bar.
    • You either need one wide image that is 955 pixels in width, and approximately 26 to 39 pixels in height, depending on the height you want - - or,
    • You will need a narrow image that will "repeat-x", repeat the image from left to right on the x axis (horizontal), to cover the full width of your navigation area. This image will need to have seamless edges, and should be narrow. The Example uses an image that is: 26 pixels wide by 39 pixels in height. Notice, when using this type image, I use "repeat" to fill entire menu area.
  2. Background image to fill Width/Height of the "active" menu tab. This is the background area for the selected or current tab.
  3. Background image to fill Width/Height of the "hovered" menu tab. This is the background image for a hovered menu tab (mouseover).
Note: For all instructions that discuss an image, you can use a background-color, instead.

What Ning CSS Classes do you edit?

  • Navigation Bar Background: #xg_navigation ul - Use this class to add one solid image or color to the entire width and height of your navigation bar (navbar). The following code will add a cool jelly blue background to the full width and height of your navigation bar. This image has seamless edges and is narrow (26 pixels wide by 39 pixels in height). I use "repeat" to fill entire menu area.
  • Edit your parameters to suit your needs. You will need to stop and think about all the parameters, on whether or not you need to edit them. Each case will be unique.
  • Border Color: I'm adding a blue border around entire navbar. You can change or remove the border.
  • Margins: You may not need the margin-left or margin-top parameters. I'm adding them so you can adjust the placement of your bar, if needed.
  • Background Color: In case the image doesn't load for whatever reason, add a similar background color. I use #003366 in this example. It's located above the height line, at end of image background code.
  • Height: This is your preference - - I suggest not going over 32 pixels in height. I'm using an image a little taller than normal: 39 pixels in height. This gives you the option of using the full height, or a little less.
  • Please do not use the round circle "bullet" in these examples.
  • Feel free to use the image in example code.
  • Example Code for Entire Navigation Bar - Jelly Blue Background:
  • #xg_navigation ul {background:url("*5WyChcyhSxy*i8tLuTV2GKtwZrh/xg_nav_hoverjblue.png") repeat scroll 0 0 #003366 !important;
    border:1px solid #003366;
    margin-left:0 !important;
    margin-top:10px !important;
    text-align:left !important;
  • Active Menu Tab Background: #xg_navigation ul li.this a - Use this class to add one solid image or color to the width and height of the active (selected) menu tab.
  • Follow the same instructions you did for the navigation bar background.
  • I am also providing the menu "text color" attribute. In the example I have overridden your built-in theme color, for the menu text. The color I'm using is an indigo blue: color:#003366. This is for active menu tab, only. The !important will override the existing color.
  • Example Code for Active Menu Tab - Jelly Red Background with blue menu text:
  • #xg_navigation ul li.this a {color:#003366!important;background:url("") repeat;}
  • Hovered Menu Tab Background: #xg_navigation ul li a:hover - Use this class to add one solid image or color to the width and height of the hovered (moused-over) menu tab.
  • Follow the same instructions you did for the navigation bar background.
  • As in the active menu tab example, I am overriding the menu text color, when hovered.
  • Example Code for Hovered Menu Tab - Yellow Background with blue menu text:
  • #xg_navigation ul li a:hover{color:#003366!important;background:url("") repeat;}
  • Menu Tab Link Text, and add thin vertical line to the right of each menu tab. - Use this example code to control your overall menu text, and to add a little more professional polish with a thin vertical line to the right of each menu tab.
  • Follow the same instructions you did for the navigation bar background.
  • In this example code, I am creating a thin gray vertical line, to the right of each main menu tab. I'm also throwing in parameters like the line height and margins. This will help you control the height and placement of your vertical line.
  • Example Code:
  • #xg_navigation ul li a {background-color:transparent; border-right:thin solid #333333; color:#FFFFFF; line-height:2.5em; margin-top:0 !important; padding:1px 10px 0;}

  • You're on your own on sub-tabs for now. ;-) This Tutorial took more concentration and time, than any Ning Tutorial I've written to-date. I hope it helps a lot of Ning Network Creators with customizing your Ning Menus. Please let me know if you find any mistakes. I could not upload the last image. You can use the URL in example code for the red jelly image, and copy/save to your hard drive. Or, as long as JenSocial is alive and well, these image URLs should be okay to use. See attached text file for all CSS contained in this Tutorial.

COPYRIGHTS - - These tips are written exclusively for the members and site visitors of and, by Jen of These tips are owned and copyrighted by JenSocial, and are NOT available for distribution. PLEASE SHARE THE TIP PAGE LINK.
  • Please DO SHARE THIS TIP LINK. :-)

Views: 3972


Replies to This Discussion

Thank you. l bookmark this page.
This is great Jen. I am using your code with a few modifications till I get a change to upload my own images. Here are the 3 things I cannot figure out:

1-When I log out, the nav bar disappears

2-I have a little piece at the end of the nav bar that I cannot get rid of

3-How can I decrease the space between the header bar and the nav bar? The theme I am using does not seem to provide code to do it.

Here is the code I am using:
1. The navbar probably disappears when you log out, because anytime you change CSS and log out soon, the cache is still there for the previous code. It will catch up.

2. Not sure will have to look - - probably tomorrow.

3. Will have to look. ;-)

Hi Jenny, 

I'm also having the same issue! I was hoping it was a cache issue (as you've mentioned below), but I've cleared the cache and tried it in different browsers and it's not working properly.

I'm talking in reference to You can see the Nav Bar doesn't have the "Photos" and "Videos" tabs replaced when logged out. However, when I'm logged into an admin, all the tabs are as they should be. 

I've attached the CSS. Let me know if you can help! 

Thank you!


Hi Amy,

I'm thinking there's an error at bottom of your CSS. The code looks fine in the attached, best my eyes are following it. If I add all the code to bottom of CSS via firebug, like you, it doesn't work. However, if I add to top of CSS, it does work. I tried to find the error, but not seeing it yet. Look for missing ending brackets, or other CSS typos.



2. This is more complicated than it would seem to be. If you change the width much for the entire navbar, a lot of code has to be changed to shift everything to the left. I would make the width 950 instead of 955. That helps a lot.

3. Here's the code you need to fix this:
#xg_navigation ul div.xg_subtab ul {
margin-top:1px !important;}

BTW, great job!
ok Jen I have tried this all day today for hours since I have been wanting a navbar like yours but in shiny black.

Now if you go to you will see the result of my work with your great tutorial but I still have the feeling that something is not right.

I used an image with 20 px width only (instead of 39px) because I dont want the navbar to be so big but now it made it double? It added two navbars on top of each other
Looks like you need several settings, that would take some time. I'll try to look at end of week if I can, booked solid.
I kept working on it since I last wrote the comment here and Im not sure if you seen the new version. Does it look better?
I noticed a few minor issues is all - - like menu title text being moved up a tiny bit, same with subtabs, and things like a little black rectangle showing below "current" menu selection. But all minor...
oh ok minor errors but Im glad I made it that far lol I was already going crazy lol
If I want to add the blue jelly nav bar background to my subherder tabs on the right hand side how, would I do it?
by subtabs I mean the tabs on the right hand side that say , members, forum. So I can make it look more styled and professional.



© 2019   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

\ua\ua\ua\ua\ua\ua\ua\ua\ua\ua\ua\ua\uaHome\ua/div> \uadiv>\ua\ua\ua\ua\ua\ua\uaVIP Ning Tips\ua/div> \uascript type="text/javascript" language="javascript">\udx$(document).ready(function() {\udif (x$("div.xg_widget_main_index_index").length > 0) { \udx$('div.jenhome').css('display','none'); \ud}\ud});\ud \ua!-- Scroll Up --> \ua!-- © Copyright 2012 JenSocial VIP Ning Tip, Do not remove Credits. --> \uascript type="text/javascript" language="javascript">\udif (typeof(x$) != 'undefined') {\udx$('.xj_user_info').prepend(x$('.module_members'));\udx$('.xg_widget_groups .module_text').prepend(x$('#xg.xg_widget_groups .module_page'));\udx$('.module_members').clone().appendTo(x$('#membermod'));\udx$('#forummod').prepend(x$('.module_forum'));\udx$('#photomod').prepend(x$('.module_photo'));\udx$('#sidebarmod').prepend(x$('.xj_sidebar_content'));\ud/* x$('#la').load(' .module-feed'); */\ud/* x$('#la').load(''); */\ud}\ud \ua!-- Script Credit: --> \uaa href="#" class="scrollup">Scroll \uastyle>\ud#google_translate_element {height:26px!important;margin-top:3px;}\ {padding:0px!important;height:26px!important;}\ img {float: left;}\ {margin-top:-5px!important;}\ud.scrollup {\ud background: url("") no-repeat scroll 0 0 transparent;\ud bottom: 28px;\ud display: inline !important;\ud height: 34px;\ud opacity: 0.3 !important;\ud position: fixed;\ud right: 0;\ud text-indent: -9999px;\ud width: 40px;\ud z-index: 999;\ud}\ud.scrollup:hover {\ud opacity:0.99!important;\ud}\ud/* Tighten up Top News/Everything */\ud#xg_network_activity .activity-feed-view-selector {font-size:16px;margin-top:5px;margin-bottom:0px;}\ud#xg_network_activity .activity-feed-view-selector:before {content: "» ";}\ud/* Fix Navigation Sub Tabs */\ud#xg_navigation div.xg_subtab ul li {margin-top:3px!important;border-bottom:1px solid #ffffff!important;}\ud#xg_navigation div.xg_subtab {width:auto!important;}\ud#xg_navigation ul div.xg_subtab ul li a {width:inherit!important;}\ud\ud \uascript type="text/javascript">\ud $(document).ready(function(){\ud $(window).scroll(function(){\ud if ($(this).scrollTop() > 100) {\ud $('.scrollup').fadeIn();\ud } else {\ud $('.scrollup').fadeOut();\ud }\ud });\ud $('.scrollup').click(function(){\ud $("html, body").animate({ scrollTop: 0 }, 600);\ud return false;\ud });\ud });\ud \ua!-- End Scroll Up --> \ua!-- VIP Menu Tab --> \uadiv id="viptop">\ua\ua\ua\ua\ua\ua\ua \ua/div> \ua!-- End VIP png, style in specstyles.css --> \ua!-- Styles --> \ualink rel="stylesheet" href=""> \ua!-- Call Styles for Rocket, Social Media Pngs, NingBar Nav, Tabbed Content, and more... --> \ualink rel="stylesheet" href=""> \ua!-- NingBar Links js call --> \uascript type="text/javascript" src=""> \uascript type="text/javascript" language="javascript">\udif (typeof(x$) != 'undefined') {\udx$("li#xg_tab_xn139").prepend('\ua\ua\ua\ua\ua\uaBest Ning Tips');\ud}\ud \ua!-- Format Special Groups --> \uascript type="text/javascript">\udif (window.location.href.split('group/')[1] == 'ningnetworktips') {\udx$('div.pad5').css('display','none'); \udx$('div.xg_module_head').css('display','none');}\ud \ua!-- End Grps --> \uascript type="text/javascript">\udif (window.location.href.split('group/')[1] == 'ningnetworktips') {\ud x$('div.xg_module_foot ul li.left:contains("Add")').replaceWith("\ua\ua\ua\ua\ua\uaPlease add new Ning Tips & Tricks to Support & Tips Forum.");\ud}\udif (window.location.href.split('group/')[1] > 'ningnetworktips/forum') {\ud x$('ul.navigation li.right:contains("Add")').replaceWith("\ua\ua\ua\ua\ua\uaPlease add new Ning Tips & Tricks to Support & Tips Forum.");\ud}\udif ((window.location.href.split('forum2/')[1] == 'topic/new/') || (window.location.href.split('forum2/')[1] > 'topic/new/')) {\ud x$('form#add_topic_form fieldset.nolegend dl dt label:contains("Social Directory Listing Title:")').replaceWith("Social Directory Listing Title: (Limit 1 Listing per Member Account)");\ud}\udif (window.location.href.split('group/')[1] == 'premiumningtipsbyjen') {\udx$('.right.xg_lightborder.navbutton:contains("Join Premium")').before("\ua\ua\ua\ua\ua\ua");\udx$('.toggle_list').css('width','100%');\udx$('.toggle_head').css('background-color','transparent');\ud}\ud \ua!-- Rocket Display/Call --> \uaimg id="rocket" src=""> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud x$('#rocket').addClass('animated lightSpeedIn');\ud}\ud \uadiv id="social-feeds">\ua\ua\ua\ua\ua\ua\ua \ua/div> \ua!-- End Social Media pngs --> \ua!-- Special Ad Within Forums-Blogs --> \uadiv id="tmp_insideforumblog" style="display:none;"> \ua\ua\ua\ua\ua\ua\ua \ua\ua\ua\ua\ua\ua\ua . \ua/div> \uascript type="text/javascript">\udif (window.location.href.split('forum/')[1] > 'topics/') {\ud /* insert ad/content inside forums */\ud x$(".xg_widget_forum_topic_show div.discussion div.description").prepend('\ua\ua\ua\ua\ua\ua
');\ud x$(".xg_widget_forum2_topic_show div.discussion div.description").prepend('\ua\ua\ua\ua\ua\ua
');\ud x$(".xg_widget_profiles_blog_show .xg_blog .postbody").prepend('\ua\ua\ua\ua\ua\ua
');\ud var t_insideforumblogCode = document.getElementById('tmp_insideforumblog');\ud var insideforumblogCode = document.getElementById('insideforumblog');\ud insideforumblogCode.innerHTML = t_insideforumblogCode.innerHTML;\ud}\ud \ua!-- End Special Ad Forums-Blogs --> \ua!-- Copyright @ 2012 JenSocial, VIP Tip - Do not remove this line. Tip: Install FB, Twitter, SU, GP, and Pin buttons after share links --> \uadiv id="tmp_aftershare_social" style="display:none;">\ua\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua
\ua \ua \ua \ua \ua \ua \ua
\ua/div> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud /* insert 5 social media buttons below blogs, photos, and videos uses same code */\ud x$(".share-links").after('\ua\ua\ua\ua\ua\ua
');\ud var t_aftershare_socialCode = document.getElementById('tmp_aftershare_social');\ud var aftershare_socialCode = document.getElementById('aftershare_social');\ud aftershare_socialCode.innerHTML = t_aftershare_socialCode.innerHTML; \ud}\ud \ua!-- End Install 5 media after all share --> \ua!-- Add Categories and Discussion List Links, Forum --> \ua!-- Main Forum Page --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$('.xg_widget_forum div.xg_headline div.tb h1:contains("Forum Discussions")').append("\ua\ua\ua\ua\ua\uaList: >>Categories");\ud}\ud \ua!-- Category Page --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$('.xg_widget_forum div.xg_headline div.tb h1:contains("Discussion Forum")').append("\ua\ua\ua\ua\ua\uaCategories: >>Discussion List");\ud}\ud \ua!-- End Categories List Links --> \ua!-- Add Categories and Entries Links, Forum2 --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud x$('.xg_widget_forum2 div.xg_headline div.tb h1:contains("Discussion Social Directory Listings")').replaceWith("\ua\ua\ua\ua\ua\ua

Social Directory Listings - Categories

" + "\ua\ua\ua\ua\ua\ua


");\udx$('div.xg_headline div.tb h1:contains("Support & Tips Social Directory Listings")').replaceWith("\ua\ua\ua\ua\ua\ua

Social Directory Listings

");\ud}\ud \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud x$('.xg_widget_forum2_index_index div.xg_headline div.tb h1:contains("Social Directory Listings Social Directory Listings")').replaceWith("\ua\ua\ua\ua\ua\ua

Social Directory Listings

" + "\ua\ua\ua\ua\ua\ua


");\ud}\ud \ua!-- End Cats and Entries Links --> \ua!-- Accordion --> \uascript type="text/javascript">\udx$(document).ready(function(){\ud//Set default open/close settings\udx$('.acc_container').hide(); //Hide/close all containers\udx$('.acc_trigger:first').addClass('active').next().show(); \ud\ud//On Click\udx$('.acc_trigger').click(function(){\ud\u9f( x$(this).next().is(':hidden') ) { \ud\u9x$('.acc_trigger').removeClass('active').next().slideUp(); \ud\u9x$(this).toggleClass('active').next().slideDown(); \ud\u9\ud\u9eturn false;\ud});\ud\ud});\ud \ua!-- End Accordion --> \ua!-- Add QuickPost Links to GOTO links in Status Box --> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$(".xg_widget_main_index div.xj_StatusAndShareLink div.xj_status form div.input div.form-hint").prepend('\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua Goto Your: \ua \ua \ua \ua \ua \ua Blog · \ua \ua \ua \ua \ua \ua Discussion · \ua \ua \ua \ua \ua \ua Events · \ua \ua \ua \ua \ua \ua Photos · \ua \ua \ua \ua \ua \ua Videos\ua\ua\ua\ua\ua\ua
');\ud}\udelse{\ud}\ud \ua!-- Google Analytics --> \uascript type="text/javascript">\ud var _gaq = _gaq || [];\ud _gaq.push(['_setAccount', 'UA-2481418-2']);\ud _gaq.push(['_trackPageview']);\ud\ud (function() {\ud var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\ud ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';\ud var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\ud })();\ud \uascript src="" type="text/javascript"> \uascript type="text/javascript">clicky.init(213462); \uanoscript>\ua\ua\ua\ua\ua\ua\ua


\ua/noscript> \ua!-- Claim Outbrain for Blogs --> \uainput type="hidden" name="OBKey" value="zKc+F5C7zcWMfMcACUTh1g=="> \uascript language="JavaScript">var OBCTm='1288731617374'; \uascript language="JavaScript" src=""> \ua!--Outbrain Widget for Blogs --> \uadiv id="tmp_blog_outbrain" style="display:none;"> \ua\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua\ua\ua\ua\ua\ua\ua
\ua/div> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud /* insert widget bottom of blogs */\ud x$(".xg_blog .postbody").after('\ua\ua\ua\ua\ua\ua
');\ud var tempblogCode = document.getElementById('tmp_blog_outbrain');\ud var origblogCode = document.getElementById('blog_outbrain');\ud origblogCode.innerHTML = tempblogCode.innerHTML; \ud}\ud \ua!-- END Outbrain Blogs --> \ua!-- Claim Outbrain Forums --> \uainput type="hidden" name="OBKey" value="BIxDaM2ll4yyQlbXtzGbSw=="> \uascript language="JavaScript">var OBCTm='1288667913412'; \uascript language="JavaScript" src=""> \ua!--Outbrain for Forums --> \uadiv id="tmp_forum_outbrain" style="display:none;"> \ua\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua \ua\ua\ua\ua\ua\ua\ua
\ua/div> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\ud /* insert widget bottom of forums */\ud x$(".xg_widget_forum_topic_show div.discussion").after('\ua\ua\ua\ua\ua\ua
');\ud var tempforumCode = document.getElementById('tmp_forum_outbrain');\ud var origforumCode = document.getElementById('forum_outbrain');\ud origforumCode.innerHTML = tempforumCode.innerHTML; \ud}\ud \ua!-- END Outbrain Forums --> \ua!-- Toggle Content --> \uascript type="text/javascript">\ud x$(".toggle_body").hide();\ud //toggle the content with class toggle_body\ud x$(".toggle_head").click(function()\ud {\ud // 200 is good for fast, and 600 for slow\ud x$(this).next(".toggle_body").slideToggle(200);\ud });\ud \ua!-- End Toggle --> \ua!-- Tabbed Content --> \uascript type="text/javascript">\ud\u9$(".jstab_content").hide(); //Hide all your content under each tab\ud\u9$("ul.jstabs li:first").addClass("active").show(); //Activate the first tab\ud\u9$(".jstab_content:first").show(); //Show the first tab content\ud\u9/On Click Event\ud\u9$("ul.jstabs li").click(function() {\ud\u9x$("ul.jstabs li").removeClass("active"); //Remove any "active" class\ud\u9x$(this).addClass("active"); //Add "active" class to selected tab\ud\u9x$(".jstab_content").hide(); //Hide all tab content\ud\u9var activeTab = x$(this).find("a").attr("href"); \ud\u9x$(activeTab).fadeIn(); //Fade in the active ID content\ud\u9return false;\ud\u9);\ud \ua!-- END Tabbed Content --> \ua!-- js File for Simple HTML Insert - JS Code Generator Developed by Elson --> \uascript type="text/javascript" src=""> \uascript type="text/javascript">\udif (typeof(x$) != 'undefined') {\udx$(".xg_chat div#mainChatContainer.xg_verticalPane div.xg_chatWindow div.xg_chatBar").after('\ua\ua\ua\ua\ua\ua
\ua \ua \ua \ua \ua \ua Welcome to JenSocial! \ua \ua \ua \ua \ua \ua Access VIP Club.\ua\ua\ua\ua\ua\ua
');\ud}\udelse{\ud}\ud \ua!-- Replace NingBar Search with Google Search --> \uascript type="text/javascript" src=""> \ua!-- Social Wrapper Icons After NavBar --> \uascript type="text/javascript" language="javascript">\udvar fb3_html = '\ua\ua\ua\ua\ua\ua\ua/div>\ua/div>\ua/div>\ua/div>\ua/div>\ua/div>