JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

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?

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.
Background image to fill Width/Height of the "active" menu tab. This is the background area for the selected or current tab.
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("http://storage.ning.com/topology/rest/1.0/file/get/1061457874?profile=original") repeat scroll 0 0 #003366 !important;
height:34px;
border:1px solid #003366;
margin-left:0 !important;
margin-top:10px !important;
text-align:left !important;
width:955px;}
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("http://storage.ning.com/topology/rest/1.0/file/get/1061457045?profile=original") 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("http://storage.ning.com/topology/rest/1.0/file/get/301582299?profile=original") 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 JenSocial.com and Creators.ning.com, by Jen of JenSocial.com. These tips are owned and copyrighted by JenSocial, and are NOT available for distribution. PLEASE SHARE THE TIP PAGE LINK.

Please DO NOT COPY OR DISTRIBUTE THIS TIP ON ANY WEBSITE, OTHER MEDIA, PRINT OR ONLINE.
Please DO SHARE THIS TIP LINK. :-)

0 members favorited this

Attachments:

xg_nav_hoveryellow.png, 1 KB
xg_nav_activejred.png, 1 KB
CSSTip_CustomizeNingMenu_NavBarBackground_ActiveTab_HoveredTab.txt, 1 KB

Replies to This Discussion

Permalink Reply by Magic Happens on June 30, 2010 at 12:03pm

Thank you. l bookmark this page.

Permalink Reply by Bill Vasko on July 1, 2010 at 11:11pm

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:

Attachments:

xg.docx, 11 KB

Permalink Reply by JenSocial on July 1, 2010 at 11:19pm

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. ;-)

Permalink Reply by Amy Long on June 25, 2012 at 5:36pm

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 www.changeourstory.com. 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!

Attachments:

nav bar CSS.txt, 4 KB

Permalink Reply by JenSocial on June 25, 2012 at 7:05pm

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.

Best,

Jen

Permalink Reply by JenSocial on July 2, 2010 at 1:08am

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!

Permalink Reply by Successful Women Network on July 25, 2010 at 5:44pm

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 http://www.Successful-Women-Network.com 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

Permalink Reply by JenSocial on July 26, 2010 at 2:24pm

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.
Best,
Jen

Permalink Reply by Successful Women Network on July 26, 2010 at 2:59pm

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?

Permalink Reply by JenSocial on July 26, 2010 at 3:14pm

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...
;-)

Permalink Reply by Successful Women Network on July 26, 2010 at 3:23pm

oh ok minor errors but Im glad I made it that far lol I was already going crazy lol

Permalink Reply by Lex Smith on August 22, 2010 at 4:23pm

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.