Need help? Check out our Support site, then


Sight: images in custom menu

  1. I saw the Facebook and Twitter icons on this site http://livingtorontojournal.wordpress.com/ and I'm trying to do something similar. Obviously I'm missing something. Any help is appreciated.

    My site http://blog.vivianpaige.com

    The blog I need help with is blog.vivianpaige.com.

  2. Hi Vivian!

    Here's how they've done it:

    [selector for menu item] {
    background: url("IMAGE_URL_HERE?w=30&h=30") no-repeat scroll 0 0 transparent;
    height: 30px;
    }
    [selector for menu item link] {
    color: transparent;
    display: block;
    width: 30px;
    }

    But there's no reason to use two different selectors; in fact, it's better to add the bg image to the link. So, the CSS for your Facebook link would be:

    #menu-item-23267 a {
        background: url("IMAGE_URL_HERE?w=30&h=30") no-repeat scroll 0 0 transparent;
        color: transparent;
        display: block;
        height: 30px;
        width: 30px;
    }
  3. That worked beautifully! (Now I just have to fix the coloring of the images.)

  4. Personally I don't like the positioning. I would probably place them side by side, below the search box.

  5. I don't know how to do that. Ideas?

  6. One possibility:

    .header-search {
        width: auto;
    }
    .secondary-navigation {
        margin-right: 0;
        width: 100%;
    }
    .secondary-navigation ul {
        margin: 1.6em 0 0;
        text-align: right;
    }
    .secondary-navigation li {
        display: inline-block;
        margin: 0 0.5em;
    }

    Doesn't look very good with only two icons. Alternative (icons and searchbox in a row):

    .secondary-navigation {
        margin-right: 1em;
    }
    .secondary-navigation ul {
        list-style: none outside none;
        margin: 3.5em 0 0;
    }
    .secondary-navigation li {
        display: inline-block;
        margin: 0 0.5em;
    }
  7. Oops - delete this:
    list-style: none outside none;
    (It's the default, I just forgot to remove it.)

  8. I added a third icon and used your first one. (Not even sure if I have the right url in that thing!) Will work on it a bit more later. Thanks so much for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic