One of the most common requests I see in the Elegant Themes User Community Facebook group is to have more design options for the sub-menus.
This is the first in a new series for different sub-menu options.
In this tutorial I will show you how to create and tweak Compact Divi Sub-menu as shown on the demo below, with just a little CSS.
Adding The Custom CSS
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)
1. Add this CSS.
/*------------------------------------------------*/
/*-----------[GQ - COMPACT SUB-MENU]--------------*/
/*------------------------------------------------*/
/* drop down menu - level 1 */
.nav li ul {
width: 180px;
padding: 0px;}
.nav li li {
line-height: 14px;}
#top-menu li li {
padding: 0 0px;}
#top-menu li li a {
font-size: 13px;
width: 180px;
padding: 5px 10px;
font-weight: 300;}
/* drop down menu - level 2 */
.nav li li ul {
top: -3px;
left: 180px;}
/* change drop down icon in submenus only */
#top-menu li .menu-item-has-children > a:first-child:after {
top: 6px;
right: 5px;
font-size: 14px;
font-weight: 400;
content: "5";}
Notes
If you want to change the width of the sub-menu, just modify this part of the css. All three of these should be the same width whichever width you choose.
If you want to change the font-size, line-height and font-weight, just modify these parts of the css.
This part is the drop-down icon in the sub-menus. It changes it from a downward carrot to a right carrot which is the actual direction of the second level sub-menu. You can adjust font-size, font-weight and position here.
And that’s it.
If you used this on one of your projects, please share a link below so we can see how you used it.
Have fun!
Well that’s all for now. I hope you find this article useful.
Having an extra option to work with menu is a good thing! Thank you!
Thank you so much! You are such a gem, Geno. I am designing a site for a nonprofit with a large menu. I tried Divi’s mega menu as well as Max Mega Menu, and I’ve had challenges with both, especially on mobile. This laid out well on my iPhone (your demo, anyway). I will experiment with this one, but I will wait with anticipation for the rest of your series to see which one I like best! I’m thrilled.
Geno, this works very well except….. when I’m looking at the menu on my iPhone (6S+), the font is huge in landscape view, despite my reducing the font sizes. The font looks good initially in portrait view, but stays large when switching from landscape to portrait. Not only that, but I can’t scroll down to the bottom the way yours does. Are there fixes for that?
This CSS should really only be targeting desktop. I dont think it changes anything on the mobile device. There might be other issues at play. If you share a link I can take a look.
I haven’t had a chance to use it yet, but I definitely will! Another great share Geno. Thank you.
Thanks Kolleen 🙂
Fantastic – Thanks Geno. I look forward to your future tutorials.
Thanks Paul
Thanks Mate, Sub menus have scrubbed up quite nicely.
My pleasure.
Geno, I am desparately searching for a solution to output submenus of the active main menu item in the sidebar…
I once realized that with another system, see here; http://www.lyriktext.de (the submenu opens in the left sidebar)
Would it be possible to place your submenus, beginning from second level, into a sidebar widget?
That would be great…
Yes it is possible to get the same effect but it would require a different set of CSS classes and elements.
Hi Geno, I used this compact submenu and, while it works beautifully on both a laptop and desktop, I just realized that my dropdown menu items aren’t working on mobile (iPhone and iPad). Clicking on the Level 1 menu item closes the Level 2 dropdown list. (The Level 2 pages do open.) Your help is greatly appreciated!
Hello!!
I implemented this really nicely but it only affects to the main menu and not the secondary menu. Any way to fix it?
Thanks!
That’s what it was meant for. What other menu did you have in mind?
this is so awesome Geno! thanks! Do you have some tricks for more compact mobile menu?
You are a life saver! your CSS worked beautifully. I was able to reduce the font on the pulldown menus so they dont wrap to 2 lines. Perfecto.
https://wingedliberty.com/
Awesome. Thanks for taking the few extra minutes to let me know. The site looks beautiful by the way. Great job!!!!!
I have to many sub menus in my navigation bar & I want to compact it. How can I do it?
here’s the link:- https://beezpharmaceuticals.com/
Gino does it again! I was struggling with a very long sub menu of service options, and this made it readable! It’s in development so I can’t share just yet or would gladly do so.