Custom CSS Class for WordPress Custom Menu

[houseofgrays]

Hi everyone, I hope I can ask this question intelligently :)

I want my WordPress Custom Menu to look like this:

http://test.northstaropinion.com/wp-content/uploads/2011/11/NorthStar-Home.jpg

Here’s what I have so far:

http://test.northstaropinion.com/

I know I need to create a custom menu class for the images in order to reduce the padding on the top, left and right. I’ve followed a few tutorials on doing just that, but the tutorials and snippets don’t work exactly for my theme’s CSS, and I’m getting a little lost. I thought I created the CSS properly, but it’s not changing anything, so I’m sure I’ve written it wrong or something.

Secondly, and I do know this is a WordPress issue, not a CSS issue, but I thought it might be relevant…when I try to copy the custom classes into the menu item options, it won’t save/retain them. Again, maybe I’m inputting these wrong as it’s confusing what exactly to put here and how to write it (no periods for classes, for example, just ID and Class names separated by spaces?)

If there’s any more information I can provide, please let me know. I’m desperate!

Thanks in advance!

Megan :)

[TheDoc]

Hey Megan, it’s a little confusing to find out exactly what you’re looking for. The nav looks like it’s working to me, maybe you’ve already got it sorted?

[houseofgrays]

Hi guys,

I had to add some custom CSS to my main style.css

#header ul#menu-primary li.menu-item-type-custom a {
padding-right: 3px;
padding-left: 2px;
}
#header ul#menu-primary {
padding-right: 5px;
}
#header ul#menu-primary li.menu-item-type-custom a div.menu-image-link {

background-repeat: no-repeat;
background-position: center center;
width: 28px;
margin-top: -13px;
margin-bottom: -13px;
padding: 13px 0;
}

And then I had to add the following code as the Navigation label for each image:

 

That seems to have fixed it.

Thanks!

[houseofgrays]

Sorry, the code I had to add to the Navigation Label was this:

[Author]

Posts