How To Add Images To Your Divi Menu

This tutorial will show you how to add images to your Divi menu, in the dropdown submenu, or even in a mega menu and apply some styling with CSS.

Add An Image To Your Divi Menu

From the WordPress dashboard, go to Appearance>Menus. Here you will either create a new menu or add an image to an existing one. Choose the menu you want to add the image to, and look for “Custom Links” in the list under “Add menu items.”

Add images to your Divi menu with custom links

Next, add a hashtag # to the URL: field and click “Add to Menu.”

add a custom image link to a wordpress menu

Arrange the custom link menu item under the main level menu item of your choice. Expand the menu item toggle. We are going to add the image to a custom link menu item using an HTML image code. Copy and paste the code snippet below into the Navigation Label field.

add an image to a Divi menu item

Now, be sure to click the blue save button on your menu. The last step is adding the correct image url to the code snippet. To do that, we need to go to the Media Library and either upload a new photo or use an existing one.

Select the image you want to add to your Divi menu, and this opens up the WordPress media settings. Look for the Copy Link at the bottom, and copy that url.

copy the link to the image to add it to the Divi menu item

Now go back to your menu where you pasted the image HTML in the previous step. You need to replace the text that says “Insert Image URL Here” with the link you just copied. 

Replace the menu text with the link to your image
add the image to your Divi menu

NOTE: You can link this image to another page in two ways. Either add the url of the page to the URL field (shown in the image above) or you can choose to do this entire tutorial with a regular page link instead of a custom link.

Good job! You have added an image to your Divi menu.

Don’t forget to save your menu! Now go take a look!

final result of image added to a Divi menu submenu

Styling the Image In Your Divi Menu

At this point, the image is there and working. But you may want to adjust some of the styling. If you are using this as we showed in a submenu, then the best thing I can recommend is our tutorial on How To Style The Divi Menu Submenu Dropdown. That will get you a lot of ideas.

Add A CSS Class To The Image

Their are several ways we could target the image with CSS, but I want to make it as easy as possible for you. Go to your menu once again, and look up at the top corner of your screen fro something called “Screen Options.” Select that, and look for an option called “CSS Classes.” Make sure that is selected.

turn on CSS classes in WordPress with Screen Options

In the menu item that has the image, you will now see a new field called CSS Class (optional). Add a class to that. In my example, I used “pa-menu-image” to keep it simple.

add a custom CSS class to Divi image in menu

Apply Some Custom CSS to The Image In Your Divi Menu

Now we can apply custom CSS styles to the image. There’s no right or wrong here, so just do what you need to achieve the desired look. Here are some suggestions.

Using that code, it would now look like this:

image in Divi menu submenu dropdown with custom CSS

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Related Posts

Leave A Response!

Leave a Reply

avatar
  Subscribe  
Notify of

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart