WordPress – Menu images instead of text

[njrbarros]

Hi,

I’m using WordPress with TwentyTenWeaver theme to build a site and need to replace the menu text with images.

I’ve already made a few changes into the css and was able to change the menu bar background image, but I’m having problems with the menu images.

As you can see in http://teste.nubartek.com, I can only place one menu image.

I’ve made the following changes into the css:

/* =Menu

*/



#access {

background: url(http://www.simplesmentemaria.net/images/menu_pt/barra.jpg) left;

display: block;

color: #aaa;

float: left;

margin: 0 auto;

width: 940px;

line-height: 50px;

}

#access .menu-header,

div.menu {

font-size: 10px;

margin-left: 12px;

width: 928px;

}

#access .menu-header ul,

div.menu ul {

list-style: none;

margin: 0;

}

#access .menu-header li,

div.menu li {

float: left;

position: relative;

}

#access a {

width: 112px;

color: #aaa;

display: block;

line-height: 97px;

padding: 0 10px;

text-decoration: none;

}

#access ul li {

background-image: url(http://www.simplesmentemaria.net/images/menu_pt/inicio.jpg);

width: 112px;

line-height: 97px;

Can anyone please tell me how I can add more menu images?
It should look like the following image: http://teste.nubartek.com/header_example.jpg

Thanks and regards.

[virtual]

From a quick glance it looks like you have only one image for all the li’s. Give each li a different class and in the css add each different background image to that class.

[Darfuria]

If you’re using the default way of generating WordPress links (either by calling wp_list_pages or using a 3.0 menu) each item will have an id.

That being the case you could just hide the text on each of your menus, and then define a background image for each li id.

#menu li {text-indent: -9999px;}

#menu li#menu-item-16 {background: url(images/navsprite.png no-repeat 100px 50px;}

[naldjb]

hi,,thanks for this post, the only problem is, i set wp to have a staic home page and set frontpage to homepage, and im trying to use a image menu but i cant get the Id for the home, the other pages i can see it, using firebug with firefox but on the homebutton there is no id on it,,do you have any idea about this?

[drduvel]

Hi. Would love to know how you achieved it.

I can’t seem to apply the two suggestions above.

[cadesdaddy]

Not exactly background images, but to give a button effect, I styled as follows:

/* =Menu

---

*/

#access {
background: #000; /*

---

this colors the whole menu bar */
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
/*

---

THIS SET DEFINES THE BLOCK WHEN NOT HOVERING */
#access a {
/* width : auto;

---

REMOVED */
/* height : auto;

---

REMOVED */
display : block;
border : 2px outset #545252;
text-decoration : none;
list-style:none;
background-color : #000;
color : #fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding : 3px 12px;
outline : 0;
cursor : pointer;
margin-left:0px;
/* color: #FFFFFF; — ORIGINAL */
/* display: block; — ORIGINAL */
/* line-height: 38px; — ORIGINAL */
/* padding: 0 10px; — ORIGINAL */
/* text-decoration: none; — ORIGINAL */
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
/*

---

DON’T KNOW WHAT THIS COLORS */
#access ul ul a {
background: #333; /*

---

DON’T KNOW WHAT THIS COLORS */
line-height: 1em; /*

---

ORIGINAL */
padding: 10px; /*

---

ORIGINAL */
width: 160px; /*

---

ORIGINAL */
height: auto; /*

---

ORIGINAL */
}
/*

---

THIS SET COLORS THE TEXT AND BACKGROUND OF THE MENU LINK BLOCK WHEN HOVERING */
#access li:hover > a,
#access ul ul :hover > a {
border : 2px outset #545252;
background-color : #fff;
color : #000;
text-decoration:underline;
/* background: #333; ORIGIONAL */
/* color: #fff; ORIGINAL */
}
#access ul li:hover > ul {
display: block;
}

/*

---

THIS SET COLORS THE TEXT OF THE MENU LINK ON THE ACTIVE PAGE */
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
font-weight:bold;
font-size:14px;
}
/*

---

THIS SET COLORS THE TEXT OF THE MENU LINK ON THE ACTIVE PAGE ALSO I THINK :) */
#access ul li.current_page_item > a:hover,
#access ul li.current-menu-ancestor > a:hover,
#access ul li.current-menu-item > a:hover,
#access ul li.current-menu-parent > a:hover {
color: #000;
font-weight:bold;
font-size:14px;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff; /*

---

I THINK THIS COLORS THE TEXT ON THE ACTIVE PAGE TOO, BUT NOT FOR SURE */

/*

---

i love cabbage, i really do, you should try it */
}

[chrisburton]

This is an old post but I’m doing the same. Using two different custom menu’s (Main and Secondary), I used a sprite and applied a background-position to each.

Image

Code:

#main {float: left;} #secondary {float: right;}

#main li {margin-right: 50px;} #secondary li {margin-left: 50px;}

#main li, #secondary li {display: inline; line-height: 80px;}



#main li a, #secondary li a {

display: inline-block;

height: 10px;

background-image: url('/wordpress/wp-content/uploads/sprite.png');

background-repeat: none;

text-indent: -9999px;

line-height: 0;

}



/* Normal Menu */

#menu-item-45 a {width: 46px; background-position: 0 0;} /* About */

#menu-item-19 a {width:74px; background-position: -46px 0;} /* Portfolio */

#menu-item-211 a {width: 69px; background-position: -120px 0;} /* Projects */

#menu-item-27 a {width:43px; background-position: -189px 0;} /* Store */



/* Hover Menu */

#menu-item-45 a:hover {background-position: 0 -10px;} /* About */

#menu-item-19 a:hover {background-position: -46px -10px;} /* Portfolio */

#menu-item-211 a:hover {background-position: -120px -10px;} /* Projects */

#menu-item-27 a:hover {background-position: -189px -10px;} /* Store */



.logo {

float: left;

width:341px;

height:79px;

background: url('/wordpress/wp-content/uploads/sprite.png') 0 -19px no-repeat;

margin: 0 auto;

text-indent: -9999px;

}

[Deepa]

Hi,

i am beginner in wordpress, i want to add different images for all menus items with link how can i do? will give step by step procedure to make it done.

Thanku..

[Author]

Posts