All Collections
Divi Documentation
How to add Images to Divi Menu
How to add Images to Divi Menu

Using the WordPress Menu we can add images as menu items to either Divi's default Header Menu or Menu module.

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Combining the WordPress Menu functionality and Divi, we can easily add images as Menu items.

  1. Go to Appearance> Menus and edit or create a new menu.

  2. Enable the CSS classes for menu items by clicking on the Screen Options button located at the top right corner

    Screen options

  3. Check the CSS Classes option

    Enable Css Classes for the menu items

  4. Add a new Custom Link menu item type to WordPress Menu

  5. For the URL, manually copy/paste the URL that you want to open when the image is clicked, or you can use a blank URL by entering #0

  6. For the Label, paste the HTML code for the image element

    <img src="Insert Image URL Here" alt="Alternate Text" />

  7. Replace the Insert Image URL here with an actual image URL.

Note: You can grab the image URL from WordPress Dashboard > Media and click on the image you want to use.

Get the image URL

Styling the Image menu item

  1. Edit the menu item that contains the HTML code for the image

  2. Set a custom CSS class for it, like divi-image-menu-item

    Set custom class on the menu item

  3. In Divi > Theme Options > General Tab > Custom CSS, add this CSS code

/*Add a rounded border to the menu image*/
.divi-image-menu-item img {
border-radius: 10px;
/*Remove padding around the menu image*/
.divi-image-menu-item a {
padding: 0!important;
/*Remove semitransparent hover effect on the menu image*/
.divi-image-menu-item a:hover {
opacity: 1!important;

Style the image menu item
Did this answer your question?