wordpress dropdown menu with images

Beginners Guide on How to Add Image Icons With Navigation Menus in WordPress

Do you wish to add image icons with navigation menus in WordPress? That’s cool and easy. Read out our article and am sure at the end you will know how to add image icons with navigation menus in WordPress. Actually, it is a wonderful idea of adding image icons in navigation menus.

Its because plain text links will never attract the users. It helps to make your navigation menu more attractive and gives you a clear focus on items. The icons are universal so it can be easily identified. It gives a complete visual treat for the users. So if you add icons that help your visitors to easily identify and work with it.

There are basically two methods of adding image icons with navigation menus. One is using plugins and another method is by using code snippet.

Web Hosting

Methods to add image icons with navigation menu in WordPress

Method 1: Adding image icons using the plugin

There are dozens of the WordPress menu image plugin available, but among them, a Menu Image Plugin does a wonderful job.

Step 1: Install and activate the Menu Image plugin from your admin panel

menu image plugin

Step 2: Then navigate to Appearance > Menus in your admin panel

menus widget

Step 3: Then click any one of the elements in the menu structure

select menu element

Step 4: Once you expand the menu, inside each menu you will have control for the image on hover, menu image, image size, and title position.

Menu image→ It is actually a default image and displays when a user visits your website

The image on hover→ It is possible to change the image when someone hovers a mouse over the menu item

Image size→ It is possible to select different sizes for the icon

Title position→ It lets you choose the position for the text where you need to place next to the image. If the “Hide” option is selected, then the text is removed, only the icon remains

Step 5: Then click the “Set image” button which is under the navigation section

place menu image

Step 6: This will display all the media folder in WordPress. You can use an image that is stored or you can upload a new image and use it

media library image

Step 7: To upload a new image click the “Upload image” button, and then choose the image you want and then click the “Select” button

upload file image

Step 8: Right now, you can just leave the “Image on hover” option alone, and in case if you wish to change it later, you can easily add an image from the menu item.

Step 9: Then leave the rest of the settings as default. You can even alter the shape of the icon.

Step 10: Once all the settings are done click the “Save Menu” option to save all the changes that be done so far

save menu button

You can preview the changes, as well as you can refresh your website and see the changes. It is always a best practice of using the PNG image file types.

Method 2: Adding image icons using the code snippet

Another method is by adding CSS code.  WordPress dropdown menu with images 

Step 1: First move the Appearance > Menus in your WordPress dashboard and then navigate to “Screen Options” drop-down menu at the right corner

screen option button

Step 2: In that  click the “CSS Classes” box under the menu properties and this will automatically add all the new functions within menu items

css label checkbox

Step 3: Then expand the menu items which you want to insert the image

menu label

Step 4: Then in the CSS Class enter a label. The name you enter is important as you will be using it in your CSS code

css home page

Step 5: Then next click the “Save Menu” button

final save button

Step 6: The next step is to access the style.css file of your website. You can access through the text editor, or through FTP, or File Manager. Open the style.css file and enter the following lines of code:

stylesheet

.css_class_name //which you entered in the previous step

{

background-image:url(‘http://www.yourdomain.com/wp-content/uploads/2018/1/homeicon.jpg’); // use your own URL location. You will get the URL from media tools in WordPress

Background-repeat:no-repeat;

Background-position:left;

Padding-left:5px;

}

Note: Insert the code at the end of style.css file

Step 7: Finally, click the  “Update File” button to save your changes

update button

Based on your theme you need to set the images and size it through code. Hope you understood how to add image icon with navigation menus in WordPress.

If you have any queries or suggestions regarding How to add WordPress dropdown menu with images? please feel free to share with us. You can subscribe to us at Facebook and Twitter.

You may also like this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.