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.
▶️ 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.
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:
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.
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:
Hello! I am wondering if it’s possible to add one image instead of for all? Like — for example– I have a client that has a “give a gift” and they want me to add holly around the letters for christmas.. so i was going to add an SVG file and wondering if an iteration of this technique could work… maybe not but i was just wondering.
Hi Anna!
Yes, you can use a single image for all the menu items. Use the following code and add the URL of the image in background image.
nav li li a:before {
font-family: ‘ETMODULES’;
content: ‘ ‘;
background-image: URL(image-url here);
text-align: center;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
color: #2cba6c;
font-size: 1em;
transition: all .3s ease;
}
Hope it helps!