CODEWITHSUNDEEP
wordpress
user2592986
user2592986

Reputation: 13

How can i Use image in menu in wordpress?

My whole website was made in wordpress. All the menu's are in TEXT links. I want to Highlight one of them by using an image link instead of TEXT link. How do i do that in Wordpress?

Upvotes: 1

Views: 2135

Answers (3)

eyalix
eyalix

Reputation: 143

Another option is in WP setting menu, add <img src=".."/>and then your title this way it can show an image in the menu without you to edit the code. or you can use the CSS as well

Upvotes: 0

Shumail
Shumail

Reputation: 3143

You can highlight that specific menu item using CSS property. To style that particular menu item here is little guide:

Let’s say you create a menu item “HOME” in your wordpress menu. When you create it in wordpress, a specific ID and Class is assigned to that menu item like:

&lt;li id=&quot;menu-item-1704&quot; class=&quot;menu-item menu-item-type-post_type menu-item-1704&quot;&gt;&lt;a href=&quot;http://www.wordpress.org&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;

The thing to note here is WordPress always assigns each “menu-item” a unique ID Number which in above example is 1704 - menu-item-1704

So open stylesheet of your theme that styles menu, usually style.css or otherwise open header.php file of your theme and add following code between head :

#menu-item-1704
 {
   background:red; 
   display: block;
   background-image:url('http://url.to/yourbackgroundimage.jpg');
   background-repeat: no-repeat;
   width: 100px;
   height: 50px;
 }

This will style that particular menu item in your menu that's ID is 1704.

You can also style menu item with image background as well using background-image css property as well.

Upvotes: 1

Pankaj Sakariya
Pankaj Sakariya

Reputation: 69

Each menu item has a unique CSS ID, like in the following example:

<li id="menu-item-765"><a href="http://menu.item/url/">Some Menu Item</a></li>

Create your menu and look at the page source to find your menu ID's. You can set a background image to the menu item and hide the text using CSS. Using the above example:

  li#menu-item-765 a {
   display: block;
   background-image:url('http://url.to/yourbackgroundimage.jpg');
   background-repeat: no-repeat;
   width: 100px;
   height: 50px;
   text-indent: -9000px;
}

Set the width and height properties to the size of your image. The text-indent property hides the menu link text off screen, and the background-image property displays the image instead.

Repeat for each menu item.

Upvotes: 2

Related Questions