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 April 15, 2011 at 1:53am

I don't remember writing this, LOL. But, I know I did. ;-)

Happy you all liked it!

Permalink Reply by Predestined by God on April 19, 2011 at 12:16pm

Hi Jen:

Is there a way to change the dark gray area where all my tabs on my navigation rest? ... I'm thinking a pretty pink to match the site.

I've placed the code in for the navigator and it only changes the first row of my tabs and not the second.

Permalink Reply by JenSocial on April 19, 2011 at 1:37pm

Try adding this code to your Advanced CSS. Change the color to your choice. I also fixed a few other cosmetic boo-boo's:

/* Background color behind all navigation */
.xg_theme #xg_navigation {
    background-color: #B02D8B!important;
}
/* Adjust main menu links - vertical center of blue horizontal background */
#xg_navigation ul li a {
    color: #FFFFFF;
    padding: 3px 10px 0!important;
}
/* Move dropdown menu tabs up - remove gap */
div.xg_subtab   {margin-top:-8px!important;}

Best,

Jen

Permalink Reply by Predestined by God on April 19, 2011 at 8:54pm

Ooooh, working nicely .... just have to tweak a little ... but I like ... thanks a million...

Permalink Reply by Arthur West IV on January 13, 2012 at 11:46am

jen, is there a way to add just icons to the nav bar > ?

Permalink Reply by Jay Frye on February 2, 2012 at 1:00am

I must be doing something wrong I've added this code 6 different times in three different browsers and there is still a space when I mouse over my links, and when the tab is active.

I'd like for my active back ground color to fill in the space from line to line.

Just to clear up what I'm trying to say, I'd like to have my Navigation look identical to apple.com or as close as possible. I can not for the life of me figure out why this isn't working.

my sub menu tabs also appear on top of the main menu tabs this is ridiculous. lol

the network is juicekc.ning.com

Permalink Reply by JenSocial on February 2, 2012 at 1:24am

It's not ridiculous Jay. It takes a good deal of CSS styling knowledge to do this just right. There is no "set" method, all depends on your other CSS. I would start by removing the error at bottom of CSS. You're missing the ending right curly. Then I would work with this style:

.xg_theme #xg_navigation li {
margin: 0px!important;

}

Permalink Reply by Jay Frye on February 2, 2012 at 1:28am

Oh! I'm so mad at myself right now, lol thank you so much you are a life saver. I think I did it right this time. Thanks Jen!!

Permalink Reply by JenSocial on February 2, 2012 at 1:48am

My pleasure, Jay.

Goodnight all,

Jen

Permalink Reply by Successful Women Network on February 2, 2012 at 1:39am

I have to admit i am experiencing the same. No matter what code I use from here nothing changes on my navbar at all. I dont know if it has anything to do with the theme i chose. I cant get ridd of the blue active menue button for my life. I have used all the code from here even the one from the comment right above just to see if anything changes. Its so frustrating lol

Permalink Reply by JenSocial on February 2, 2012 at 1:46am

Try adding CSS to top of your code. I bet you have an error at bottom as well.

Best Regards,

Jen

Permalink Reply by Successful Women Network on February 2, 2012 at 1:54am

oh man Im so stupid sometimes lol now at least its doing something

thank you Jen :)