Jump to content
Sign in to follow this  
lshaull

using different colors and a background image in the main navigation menu

Recommended Posts

lshaull

In my main navigation, I'd like to figure out how to put either [or both] a different background color or image behind my link to a blog along with a different colored font link in my main navigation. Here's an example of a different font color in the main nav: http://www.brasstackthinking.com/category/social-media-time-management/ Here's an example of a different type of a background image: http://www.atlanticphilanthropies.org/ [the regions, grants area]. I've done a lot of playing around with firebug to identify the class of the particular link but I've been unable to get the css correct. Any insight on the specifics of the css would be very helpful! Thanks.

Share this post


Link to post
Share on other sites
cmunns

Okay do you have a link? What are you trying to use as selectors and how did you create the menu? You'll likely just need to be more specific with the selectors so they override the default styles.

Share this post


Link to post
Share on other sites
lshaull

Here's a site: http://www.youraccessacupuncture.com/ I created the menu using the Menus page under Appearance and it's assigned as the primary website navigation. I figured it's a selector css thing, but I've been unable to figure out exactly how to label it. If you'd be able to list the specific CSS, I'd really appreciate it!

Share this post


Link to post
Share on other sites
cmunns

You can actually apply your own classes to each menu item under the Menus admin screen. Just toggle the "screen options" in the top right and you'll see it there. Also each menu item has a unique ID...I'm sure you are aware of this. Here is the selector you need to beat, hierarchy wise. ` body .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: white; } ` Also if you add the classes manually you can save yourself trouble by just calling `.myclass {background:#FFF!important;}` ( to override any style )

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×