Combining the WordPress Menu functionality and Divi, we can easily add images as Menu items.
Go to Appearance> Menus and edit or create a new menu.
Enable the CSS classes for menu items by clicking on the Screen Options button located at the top right corner
Check the CSS Classes option
Add a new Custom Link menu item type to WordPress Menu
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
#0For the Label, paste the HTML code for the image element
<img src="Insert Image URL Here" alt="Alternate Text" />
Replace the
Insert Image URL herewith an actual image URL.
Note: You can grab the image URL from WordPress Dashboard > Media and click on the image you want to use.
Styling the Image menu item
Edit the menu item that contains the HTML code for the image
Set a custom CSS class for it, like
divi-image-menu-item
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;
}
