WordPress.org

Ready to get started?Download WordPress

Forums

How can I add inline icon images to nav menu? (5 posts)

  1. mtouchette
    Member
    Posted 1 year ago #

    hi all!

    i need to add little icons in what would be the bullet position my nav items each item has a different icon, and the icon changes color in rollover/current states.

    i am already using the background image for the background color and don't want to have a gazillion different button images. plus, we may ant to use the icon images in other places.

    is it possible to add these inline, or do i have to invoke multiple background images? (what is browser support for muti bg images these days, anyway)

    http://www.dev.threeriversfitness.com -- the icons are not there, but you can see everything else for a better idea of what i want to do. :-)

    thanks!

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    One approach would be to use a combined CSS image sprite and then simply shift the image to display the appropriate icon as needed using the CSS background attributes. Other than that, you could use list-style-image.

  3. mtouchette
    Member
    Posted 1 year ago #

    hi esmi, thanks for your response.

    one thing i might should mention is that the current (two, only, one blue and one green) background images are set to100% of the width for responsiveness. so not sure the shifting sprite would be the best solution.

    if i use list-style-image, can i change that for each list item? e.g. a little house for home, dialog bubble for about us, etc.? if so, how do i specify which images goes with each item, via the menu item id number?

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    can i change that for each list item?

    Yep. :-)

    If you examine the source markup of the top menu using something like Firefox with the Firebug add-on, you'll see that each menu item has it's own list of classes on the <li> tag. at least one of them will be unique - eg menu-item-43 for the About Us item. You can use these in your CSS to target each list item individually.

  5. mtouchette
    Member
    Posted 1 year ago #

    okay, i did the firebug thing and got the item numbers for each nav tab. here's what i have for the 'home' ID and classes:
    home -

    #menu-item-82

    homeRest -

    .menu-item menu-item-type-post_type menu-item-object-page menu-item-82

    homeCurrent -

    .menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-37 current_page_item menu-item-82

    so for example, i would make the declaration like so:
    .menu-item menu-item-type-post_type menu-item-object-page menu-item-82 {list-style-image:url[fullPathHere]; float:left;}
    and
    .menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-37 current_page_item menu-item-82 {list-style-image:url[fullPathHere]; float:left;}

    two questions:
    1. does the item designation *really* have to be that long? and,
    2. what would it be for the rollover focus state?

    more thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic