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 JenSocial on August 24, 2010 at 1:50pm

Right hand side? Where it says members and forum? Sorry Lex, not sure where you're referring to...

Permalink Reply by Lex Smith on August 25, 2010 at 3:45am

thats ok I figured out how to do it.

I was refering to adding an image to module headers,

http://jensocial.com/group/ningnetworktips/forum/topics/how-to-add-...

I was able to add a marble look to my module headers. I love photobucket. I loved the floating images tip. Added a cute little animated bookworm. :)

Permalink Reply by JenSocial on August 25, 2010 at 10:47pm

Great!

Permalink Reply by Lex Smith on September 12, 2010 at 8:49pm

If I want to add a small image where it says + Add Event how would I do it?

Permalink Reply by JenSocial on September 13, 2010 at 2:37pm

Hi Lex,
Please add new help discussion, for new topics. Not necessary this time because I wrote the code for you, and created a new Ning Tip. The reason I bring up the new discussion request, is because I had a hard time finding where you asked this question. LOL!
;-)

I hope this is what you wanted.
http://jensocial.com/group/ningnetworktips/forum/topics/add-event-i...

Best to you,
Jen

Permalink Reply by Escena Mexico on October 1, 2010 at 11:10am

how I can change the text size, and how I can adjust the space between each option of Navigation Menu Bar ?

Permalink Reply by JenSocial on October 1, 2010 at 4:54pm

The following line is an example of changing the font size:

#xg_navigation ul li a {font-size:16px!important;}

The padding and margin settings vary for each theme, depending on what has been set already. Here is the class id and the properties you need to work with:

#xg_navigation ul li {padding:0px!important; margin:0px!important;}

Go here to learn more about margin and padding:
http://www.w3schools.com/css/pr_padding.asp

Permalink Reply by Escena Mexico on October 1, 2010 at 9:38pm

Jen : Words fail me to thank you always...

my respect

Permalink Reply by Ren Salgado on October 6, 2010 at 12:58pm

How do I replace the menu tabs with specific images? What classes do I use?

I'm trying to make this website's menu bar:
http://www.kingofkingsreggae.ning.com

to look like this website's menu bar:
http://www.kingofkingsreggae.com

Ren

Permalink Reply by JenSocial on October 11, 2010 at 1:29pm

Hi Ren,
I haven't added a tip for background images on menu tabs, because each case is unique. You'll need to install firebug a FF add-on, inspect each menu tab, and grab the class id.

Here's the code for the main tab:
#xg_tab_main {overflow:hidden;
width:82px;
height:48px;
background-image:url(http://www.kingofkingsreggae.com/sites/default/files/home_normal.png);
}
/* Hide Menu Text */
#xg_tab_main a {margin-left: -200px;
background-color: transparent !important;
}

Best,
Jen

Permalink Reply by Ren Salgado on October 12, 2010 at 12:27pm

Thanks, you rock!

Permalink Reply by solo on April 14, 2011 at 9:16pm