We live in a visual world, and images are a big part of that. When createing websites, we all know how important images are to convey feeling, information, or add beauty. Why not add images to the Divi menu? This quick tutorial will show you how to add images to any Divi or WordPress menu.
Where and Why To Add Images To A Divi Menu
You can even add images to the main menu, but the submenu and mega menu would be the ideal places. You could even add an image that links to a product or blog post!
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.”
Next, add a hashtag # to the URL: field and click “Add to 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.
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.
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.Â
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!
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.
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.
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.
/*add a rounded border to the image*/
.pa-menu-image img {
border-radius: 10px;
}
/*remove padding around image*/
.pa-menu-image a {
padding: 0!important;
}
/*remove semitransparent hover effect*/
.pa-menu-image a:hover {
opacity: 1!important;
}
I hope you have enjoyed learning How To Add Images To Your Divi Menu. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore :)
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
OUR ONCE A YEAR SALE IS HAPPENING NOW!!!
25% OFF all Divi Plugins, Courses, and Child Themes!
Thank you for all your tuts, they have been very helpful as I’m finishing a new site. I have been trying to figure out how to replace the “Home” text with an ETModules font and it isn’t working. I found a few tuts online and they aren’t working. Currently using Divi 4.0 theme builder for my menu. Thanks.
Hi Traney,
It’s actually really easy, just grab the whole icon code from the Elegant Theme blog and replace the word “Home” with that in the menu item.
This is a great tutorial! I have a jillion questions that this just opened up though. CSS is not styling some things properly, especially when I try to add some of your tutorials together (mega menu, plus pictures, plus additional dropdown menu styling). Fonts and backgrounds won’t adjust, but border and padding will. I assume that it is because there is something in DIvi Builder overriding it? I tried resetting everything in my Global Menu that I made in Divi Builder to default, but that didn’t help either.
What I would like to have is a mega menu with the word Products at the top. then a mega menu row of 4 pictures (which are showing the 4 general categories of my WooCommerce site), then a 2nd mega menu that breaks out from the 4 photos into the various columns when they are clicked. Do you think that would be possible using just Divi?
It would also be great if the Title Attribute or Alt Text would show over or under the picture . . . not sure if that is possible either. I have all these ideas now. I may have to end up going with a plugin, but I’m not sure if any of them do this either.
Hi Curtis,
It sounds like you just need to be more specific, or in some cases use !important to override the default Divi styles. Feel free to look at our mega menu on this site, I think it is like you described.
Thanks you – this is awesome! I’ve just applied to a website and it all worked great in mobile too but then I think I upset the z-index and it now doesn’t show the images in the mobile menu. Is there somewhere I can fix this.
Hi, thank you for all the tutorials. They are very helpful.
I want to display 2 rows in one column and each row will have 3 images. Can you please suggest a way to do it without plugin.
Hi Lee, This is a great and detailed tutorial. I have been trying to use the same technique to insert pictures in mega menu of my blog site, which has Divi Extra theme. It doesn’t seem to work. Does this work only on divi theme or also on Divi Extra theme?
Results on mobile platforms with this type of code added to the menu item do not work reliably, depending on the size of the mobile platform. On smartphones, at least without a lot more trial and error, the image does not appear.
Is there any chance you can tell me how you would disable the image on mobile only. I like the divi mega-menu fine and have actually added code for fixed menu on header and scroll within the menu, but just think the images are too obtrusive on a mobile screen. I have a pro max so if it looks too much on there any smaller must be worse.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore :)
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
I’m pleased to announce our next update to version 2.2 of our Divi Events Calendar plugin with a full new search and filter module!
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Thank you for all your tuts, they have been very helpful as I’m finishing a new site. I have been trying to figure out how to replace the “Home” text with an ETModules font and it isn’t working. I found a few tuts online and they aren’t working. Currently using Divi 4.0 theme builder for my menu. Thanks.
Hi Traney,
It’s actually really easy, just grab the whole icon code from the Elegant Theme blog and replace the word “Home” with that in the menu item.
This is a great tutorial! I have a jillion questions that this just opened up though. CSS is not styling some things properly, especially when I try to add some of your tutorials together (mega menu, plus pictures, plus additional dropdown menu styling). Fonts and backgrounds won’t adjust, but border and padding will. I assume that it is because there is something in DIvi Builder overriding it? I tried resetting everything in my Global Menu that I made in Divi Builder to default, but that didn’t help either.
What I would like to have is a mega menu with the word Products at the top. then a mega menu row of 4 pictures (which are showing the 4 general categories of my WooCommerce site), then a 2nd mega menu that breaks out from the 4 photos into the various columns when they are clicked. Do you think that would be possible using just Divi?
It would also be great if the Title Attribute or Alt Text would show over or under the picture . . . not sure if that is possible either. I have all these ideas now. I may have to end up going with a plugin, but I’m not sure if any of them do this either.
Anyway, I really appreciate your great tutorials.
Hi Curtis,
It sounds like you just need to be more specific, or in some cases use !important to override the default Divi styles. Feel free to look at our mega menu on this site, I think it is like you described.
Thank you for sharing this. How can I go about creating two columns- Left column for the image and right column for submenu links?
Any direction would be much appreciated.
Hi Tammy, that would be pretty easy with our mega menu tutorial: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-create-a-divi-mega-menu/
So easy, thank you for your tut Boss.
You’re welcome!
Thanks you – this is awesome! I’ve just applied to a website and it all worked great in mobile too but then I think I upset the z-index and it now doesn’t show the images in the mobile menu. Is there somewhere I can fix this.
Hi Susan,
Did you apply a z-index to the images? Otherwise I”m not sure how you would have affected them.
Hi, thank you for all the tutorials. They are very helpful.
I want to display 2 rows in one column and each row will have 3 images. Can you please suggest a way to do it without plugin.
Hi there,
I’m not totally sure what you mean, so if you have a visual or example that would help anyone who can help here.
Very clear and helpful Tutorial. Thank you so much – this was exactly what I needed!
That’s great, so happy to hear this!
Hi Lee, This is a great and detailed tutorial. I have been trying to use the same technique to insert pictures in mega menu of my blog site, which has Divi Extra theme. It doesn’t seem to work. Does this work only on divi theme or also on Divi Extra theme?
Hi Priyanka,
Hmm, this tutorial is actually standard WordPress, not specific to Divi, so it should work.
Results on mobile platforms with this type of code added to the menu item do not work reliably, depending on the size of the mobile platform. On smartphones, at least without a lot more trial and error, the image does not appear.
I just began learning Divi , your tutorials made it so easy for me to build my first Divi website. Thank you for the tutorials.
You’re welcome, it is so nice to hear that!
Hey Nelson,
Thanks so much for this. Really appreciate it.
Is there any chance you can tell me how you would disable the image on mobile only. I like the divi mega-menu fine and have actually added code for fixed menu on header and scroll within the menu, but just think the images are too obtrusive on a mobile screen. I have a pro max so if it looks too much on there any smaller must be worse.
Thank you in advance,
Jan
I’m also struggling with how to center the sub menus within the mega-menu container if you can help me out please?
Hi Jan,
Could you please share the URL for me to investigate further?