Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Custom CSS Class for WordPress Custom Menu

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #35333
    houseofgrays
    Member

    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 :)

    #91327
    TheDoc
    Member

    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?

    #91369
    houseofgrays
    Member

    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!

    #91370
    houseofgrays
    Member

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.