Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Images Or Icons Above Divi Menu Items

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

▶️ Please watch the video above to get all the exciting details! 👆

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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 Comments

Comments By Others

  1. Sandy

    HI. Love your tutorials! I guess I’m having the same problem as a few of the comments here. The image stays to the left of the menu item. I can’t get it to move above. I tried the snippet you suggeted in a reply Dec 24, 2021 to a previous comment, but no results. Any ideas how to fix this? It is a very cool feature!

    Reply
    • Hemant Gaba

      Hi Sandy!

      Please try the following code and see if it helps:

      nav li a img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
      }

      Reply
  2. Girish

    This does not work! The icon kind of sticks to the top menu on the left but does not move above.
    I notice that this did not work for most of the people.

    Reply
  3. Alex

    Nice tutorials, but you should include a demo in your tutorials so we can see it in action before follow the instructions

    Reply
  4. JT

    Hi it doesn’t quite work for me. it stacks but its to the side.

    any suggestions please

    Reply
    • Hemant Gaba

      Hey JT,

      Could you please elaborate on the issue a little more and provide the URL of the page in order for me investigate it further?

      Reply
  5. norbit

    Hi thank you for this but it doesn’t work for me, it stacks but not cantered

    Reply
    • Hemant Gaba

      Hey there,

      Could you please share the URL for me to investigate this issue further?

      Reply
  6. Emily

    Hi, for some reason this tutorial to move both icons and images above the menu items doesn’t work for me. It sees like there might be some conflict somewhere. This is the page im trying to do it on. https://stepoutbuffalo.com/testing-menu-designs-emily/

    Thank you for your tutorials, very helpful!

    Reply
    • Hemant Gaba

      Hey Emily,

      The URL that you have shared is not working. Could you please share a valid URL for me to investigate further?

      Reply
  7. 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
      • Maky

        Hello, I have a similar problem.
        My image is on the top left corner of text menu item. Can you help me?

        Thank you for a very good article by the way.

      • Hemant Gaba

        Hey Maky,

        Could you please try this and see if that helps?

        ul#menu-hlavni li a img{
        display: block;
        margin-left: auto;
        margin-right: auto;

        }

        Let me know how it goes.

Submit a Comment

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

Recent Posts

0

Your Cart