How to add a little zing to your main menu tabs. Add a different background color, when someone hovers a menu tab. Ning enables us to set this value for sub-tabs, under Manage/Tab Manager.

  • Decide what background color you will use for the active menu option & hovered menu option. This code only uses 1 color for both.
  • Add the following code to your CSS, "Manage/Appearance/Advanced CSS"
  • Change the color:#16BFFF to your chosen color.


#xg_navigation ul li.this a, #xg_navigation ul li a:hover {
background-color:#16BFFF;
background-repeat:repeat-x;
}

If you want to override the sub-menu tab settings, add !important - - using code below.

#xg_navigation ul li.this a, #xg_navigation ul li a:hover {
background-color:#16BFFF!important;
background-repeat:repeat-x!important;
}
This code should make the background color:#16BFFF for:
1. Your active Menu Tab
2. Hovered Tabs

Hopefully, it won't interfere with any other CSS your using. You can also use an image for the background. Remind me to add that later.
~Jen~

Views: 2146

Reply to This

Replies to This Discussion

Hi Jen - thanks

 

Actually I also want to change one of my navigation tabs text colors to red but this is not working:

#xg_tab_xn127 {color:white;}

 

But by "subtabs" I mean the drop down menu items, not the various navigation tabs that you listed.

 

Let me try and explain:

For the horizontal navigation tabs I'm using a gradient background color similar to what Apple is using just in different colors.

But for the drop down menu I'm using a semi-transparent white background color and just a totally different styling.

My problem is that the drop down menu items (subtabs) somehow get the same gradient colored background BEHIND the white transparent color, which then means that it's not so transparent suddenly :)

 

Does that make sense?

The problem is that the styling applied to #xg_navigation ul apparently scoops down into my subtabs / drop down menu area. So I was wondering how I can specify "only horizontal tabs" and leave out the subtabs?

You are way too AWESOME. Way to AWESOME Jen.

is there a way to make just the font change color on hover and after being selected? in other words, i have a black background with a light blue font. when i hover over it, i just want the WORD to change to orange, and then when i click it, to stay orange.......can that be done?

Yeah, that can be done. Just change the parameter background-color to color. Change to your colors.

 

/* Regular State */

#xg_navigation ul li a {
color:#003366;
}

 

/* Selected State */

#xg_navigation ul li.this a {
color:#16BFFF!important;
}

 

/* Hovered State */

#xg_navigation ul li a:hover {
color:#FFF000;
}

w00t! thank you Jen!

 

 

LOL, I love Carlton!

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Same as SE. That would be a problem with the Trademark name.."
1 hour ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"same on all sites its a bug"
1 hour ago
Jelena replied to Riccardo Rossini's discussion 'Please Ning staff'
"Hi Riccardo I see no navegation on your network"
1 hour ago
Aaron replied to Rainer Glaap's discussion 'Heartbleed, MITM - Security Issues'
"Thanks for bringing this up! As Rainer mentioned, Ning.com wasn't vulnerable to the Heartbleed…"
2 hours ago
Khatlen Guse replied to Stig Karlsen's discussion 'Problems with Facebook activity feed'
"Hi Stig! My feed its ok now! :) I hope that your is ok too."
2 hours ago
soaringeagle replied to Riccardo Rossini's discussion 'Please Ning staff'
"id use that but to be safe make sure theres no copywrite on the pentaprism and if there is it…"
2 hours ago
Riccardo Rossini replied to Riccardo Rossini's discussion 'Please Ning staff'
"I know very well SE, I ensure you that it was a sort of gratitude for the new platform for us. I…"
2 hours ago
Riccardo Rossini replied to Riccardo Rossini's discussion 'Please Ning staff'
"Phil. I take the occasion just to ask you if you took alook at this, for me ot could be e very good…"
3 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service