How to add image in menu wordpress

There are several plugins available in the WordPress repository that allow you to add images to menu items. One such plugin is “Menu Image“, which allows you to add images to menu items with a simple drag-and-drop interface.

You can add images to menu items by adding HTML and CSS to your menu. You can first add a custom CSS class to the menu item and then use that class to add the image using the background-image property in CSS.

Let me give you an example of how you can do this:

  1. Go to Appearance > Menus in your WordPress dashboard and find the menu item you want to add an image to.
  2. Click on the Screen Options tab at the top of the page, and make sure that “CSS Classes” is checked.
  3. Add your custom CSS class to the menu item, for example, “menu-item-image”
  4. Add the following code to your stylesheet, replacing “menu-item-image” with the class you added to the menu item and “image-url” with the url of the image you want to add to the menu item.
.menu-item-image {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: contain;


Finally save your changes and refresh the page to see your image in the menu.

Alternatively, you can also use HTML to add an image. You can use an <img> tag and wrap it around with <a> tag to make it a menu link.

Leave a Comment