Sight: images in custom menu

  • vivianpaige · Member ·

    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: (visible only to logged in users)

  • justpi · Member ·

    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;
}
  • vivianpaige · Member ·

    That worked beautifully! (Now I just have to fix the coloring of the images.)

  • justpi · Member ·

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

  • vivianpaige · Member ·

    I don’t know how to do that. Ideas?

  • justpi · Member ·

    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;
}
  • justpi · Member ·

    Oops – delete this:
    list-style: none outside none;
    (It’s the default, I just forgot to remove it.)

  • vivianpaige · Member ·

    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!

  • The topic ‘Sight: images in custom menu’ is closed to new replies.