can you provide a link to your site please?
What theme are you using?
Assuming you have a menu which currently has menu items for ‘news’, ‘top 5’, ‘interviews’ there are various text replacement techniques you can use. Chris Coyier has outlined several methods at http://css-tricks.com/examples/ImageReplacement/
Thread Starter
zzuum
(@zzuum)
This is my page :
http://stefanvblog.com/category/news/
it is custom theme…
Thank you for link 🙂
Thread Starter
zzuum
(@zzuum)
Is there any chance to do that :))
Thread Starter
zzuum
(@zzuum)
ok.. sry.. But this plugin don’t work for categories.. That’s the problem..
You should be able to use the menu-specific classes to add images yourself – for example this code from News:
<li id="menu-item-632" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-632">
So in the CSS, try:
li#menu-item-632 {
background: url("URL TO YOUR IMAGE HERE");
}
Thread Starter
zzuum
(@zzuum)
.li#menu-item-632 {
background: url("http://stefanvblog.com/wp-content/uploads/2013/11/news.png");
}
i put that but nothing happend :S..
This is code of my menu now… in css.. Do I need ti delete here something?
#navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px;
list-style-type: none; list-style-image: none; position:relative;}
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none; margin: 4px;
padding: 5px 20px 5px 20px; color: blue;
background:green;}
#navmenu ul li a:hover {
background: yellow;
}
Look closely at what you have here:
.li#menu-item-632
compare that to what I posted – i.e. li is not a class, it’s a tag.
Thread Starter
zzuum
(@zzuum)
Thank you for answer 🙂
I tried it and… nothing happens … :/
#navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px;
list-style-type: none; list-style-image: none; position:relative;}
#navmenu li {display: inline;}
li#menu-item-632 {
background: url("http://stefanvblog.com/wp-content/uploads/2013/11/Untitled.png");
}
#navmenu ul li a {text-decoration:none; margin: 4px;
padding: 5px 20px 5px 20px; color: blue;
background:green;}
#navmenu ul li a:hover {
background: yellow;
}
Thread Starter
zzuum
(@zzuum)
OK, this is my code for menu..
#navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px; position:relative;}
#navmenu li {display: inline;}
li#menu-item-632 {
background:red;
}
li#menu-item-633 {
background: blue;
}
li#menu-item-631 {
background: white;
}
This is link : http://stefanvblog.com/category/news/
As you can see, the background color has changed.. but when i put background-image : url(…);, backgroung color became white and there is no image.. image size iz 300x300px… Do you know reason for that..
Thank you
Thread Starter
zzuum
(@zzuum)
i found the reason.. i need to expand [widht, height] my menu.. but i don’t know what to expand. 🙁
