A Great Way To Un-Divi Your Menu
By now we have so many tutorials about the Divi menu that I totally lost track. One of those teaches you how to add icons to the Divi menu, and another one that teaches you how to add images to the Divi menu. In this tutorial, we are going to reference those and add a new twist. We are going to show you how to display the images or icons above the menu items. This will really make your menu look great, and I’m excited to show you.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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.
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:
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.
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:
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!
Could you please share the URL of the page for me to investigate further?
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.
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.
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!
Hey Emily,
The URL that you have shared is not working. Could you please share a valid URL for me to investigate further?
Hi thank you for this but it doesn’t work for me, it stacks but not cantered
Hey there,
Could you please share the URL for me to investigate this issue further?
Hi it doesn’t quite work for me. it stacks but its to the side.
any suggestions please
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?
Nice tutorials, but you should include a demo in your tutorials so we can see it in action before follow the instructions
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.
I’m not sure what you mean about both it not working and about other people.