How To Add Images Or Icons Above Divi Menu Items Tutorial by Pee Aye Creative

How To Add Images Or Icons Above Divi Menu Items

In this tutorial I am going to show you how to add images or icons which will be displayed above your Divi menu items.

Get The Reference Tutorials Up First For Either Images Or Icons

This tutorial is focused on helping you position images or icons above menu items in Divi. Instead of rewriting our other tutorials, we will simply add onto them. So the first thing to do is decide if you want to use images, or icons, above your menu items. This will determine how you proceed with this tutorial.

If you are really observant, you may notice that both of these tutorials linked below use a different method, but yet they are actually interchangeable. You could add icons the same way as how I show to add images, and you could add images the same way as how I show to add icons. So choose a method, but it might be best to just stick with the methods shown in the tutorials.

How To Add And Position Icons Above Divi Menu Items

If you want to use icons above your Divi menu items, or if you already have them added, then follow the instructions in this section.

Add Icons Above Divi Menu Items

Who doesn’t love icons, right? They help with visualizing what a link is about, and having them above the menu items will look unique. In our reference tutorial, we showed you how to add icons to the menu items, but those are just on the side. Speaking of which, you will need to keep that tutorial handy.

How To Add Icons To The Divi Menu

How to add icons to the Divi menu and submenu Tutorial by Pee-Aye Creative

Position The Icons Above The Divi Menu Items With CSS

Now that you have your icons added, it is time to change the orientation of the menu item structure to vertical instead of horizontal. By default, the icon we added is on the left, and if you had any submenu it would also add an icon on the right. So this snippet will change the orientation of the menu item and thus change the position of the icon to the top.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*change the menu item orientation to vertical*/

nav>ul>li>a {
	flex-direction: column;
}


/*adjust the position of the icon above the menu item*/

nav li a:before {
	margin-bottom: 20px;
	margin-right: auto!important;
	margin-left: auto!important;
}


/*adjust the position of the submneu dropdown icon below the menu item*/

nav>ul>li.menu-item-has-children>a:first-child:after {
	position: relative!important;
	top: 20px!important;
}

Note that some of the values are just examples, you can adjust those as needed.

Your icons and menu items should now look something like this:

add icons positioned above Divi menu items

How To Add And Position Images Above Divi Menu Items

If you want to use images above your Divi menu items, or if you already have them added, then follow the instructions in this section.

How To Add Images Above Divi Menu Items

Who doesn’t love icons, right? They help with visualizing what a link is about, and having them above the menu items will look unique. In our reference tutorial, we showed you how to add icons to the menu items, but those are just on the side. Speaking of which, you will need to keep that tutorial handy.

How To Add Images To Your Divi Menu Tutorial by Pee-Aye Creative

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*change the menu item orientation to vertical*/

nav>ul>li>a {
	flex-direction: column;
}


/*adjust the position and styling of the image above the menu item*/

nav ul li a img {
	max-width: 60px;
	margin-bottom: 20px;
}


/*adjust the position of the submneu dropdown icon below the menu item*/

nav>ul>li.menu-item-has-children>a:first-child:after {
	position: relative!important;
	top: 20px!important;
}

Note that the max width of 60px and margin bottom of 20px are just examples, you can adjust those values as needed.

Your images and menu items should now look something like this:

add images positioned above Divi menu items
4
Last updated May 11, 2021 @ 1:03 am

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

2 Comments

  1. Lauren

    Hi Nelson, thanks for the post. I’ve followed along and it’s all worked very well except the “nav>ul>li>a { flex-direction: column; }” snippet does not seem to have any effect on the images. They are still left of the menu items and won’t move above. Any thoughts on what I could be missing here? Thanks!

    Reply
    • Hemant Gaba

      Could you please share the URL of the page for me to investigate further?

      Reply

Submit a Comment

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

Recent Posts

Welcome Hemant To Our Team

Welcome Hemant To Our Team

I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!

Pin It on Pinterest

0

Your Cart