Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
In Recipe #14 I’m going to show you how to create a sleek horizontal submenu with Divi. I am sure there was someone in the community who asked me about this but I can’t remember who 
, however I thought this would be useful for many as one of the major gripes designers have had with Divi is the lack of navigation design options. So hopefully this will add one more little trick to your arsenal, I know I am certainly going to use it!
You can view the demo here.
So let’s get cooking!
Cooking time
This should take you around 5 minutes max.
Preparation
There is no real preparation for this Recipe, you just need to make sure you have your primary menu set up and have at least one submenu item.
The code in this Recipe will work with Default, Centered and Centered Inline menu styles, it will have no effect on the Slide In, Fullscreen and Mobile Menu styling. It will also work with any menu animation you choose.
I have provided the code for 2 submenu levels only, basically because I think any more than two levels is not great for user experience. You can easily extend the code for extra levels if you have them.
Method
So this is a super simple recipe (maybe it should have been a Quick Snack? ). All you need to do is add the following CSS to your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section
/*-----Slim Horizontal Submenus-----*/
.nav li ul {
visibility: hidden;
z-index: 9999;
position: fixed;
width: 100vw;
left: 0;
padding: 0;
text-align: center !important;
border: none;
background: #7bc5f7;
box-shadow: none;
}
.nav li.et-reverse-direction-nav li ul {
right: 0;
top: auto;
background: #bae1fc;
}
#top-menu li li a {
width: 100%;
}
If you are using the Default menu option then you may just want to change this bit of CSS:
text-align: center !important;
To this, so it sits below the top level rather than in the center:
text-align: right !important;
And that’s it. Much simpler that you thought it would be I bet?.
You can check out some more menu recipes in the Menu Category here.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Hi Michelle, thank you for this tasty treat. I was wondering how can I change the colours to match each page. In other words, the first dropdown menu would be green to match the page the second blue ect…
Each menu item has a unique ID, you can use that to target the submenus.
Hi Michelle,
Thank’s for this code. It helped me a lot !
I have just a small issue on my home. When i scroll the submenu scroll too.
This generates a gap between the first and second menu.
This my URL
https://www.nestdecoration.com/pre-production-home/
Can you help me ?
Thank’s a lot
Karl
I don’t see it active on your site.
Hi! Very Nice. What if I want to carry this out on a full-width menu ONLY?
It will work fine, you just need to adjust the classes to those on the module
What is the coding to reduce the space between sub-menu items in Divi? I want to leave the drop down as is, but reduce the padding? Can you help?
The default value is:
#top-menu li li a {
padding: 6px 20px;
}
So you would reduce the 6px value to move them closer together.
Hi,
Want to divide sub menu in 4 columns.
You want to use the mega menu option for that
Thank you very much, Michelle. This code works well. The only problem I’m having is that the dropdown menus are not aligned left with the entire width of the page (directly under the top level menu). Can you please let me know what might fix this? Thank you!
You can add this to Divi > Theme Options > Custom CSS:
.container.et_menu_container {
width: calc( 100% – 60px);
}
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
hey Michelle, your divi snippet is great…works good….
but I need to ask something…. we work with a boxed-layout on 1280px in the middle page area. your snippet is extending the
backround to maximum page size. How can I get it to just the boxed layout without getting over the borders ??
thanks in advance.
greets from berlin/germany
Do you have a link I can take a look at please Carsten?
Hi Michelle! Thanks for this recipe. Working fine in my site. Now i have a little problem and my golive is next week, can u help me? I using 2 kind of menus in my site, the primary ( it´s working fine with this recipe, show in every page, horizontal, really nice). And the second one was a vertical menu that i use in right of my content to show another relevant options. My ploblem is that all menus are horizontal now, since i need the only primary horizontal. This second one menu is a fullwidth menu, from a divi… Read more »
Can you provide a link please and I can take a look for you
I want display submenu.
Remove dropdown menu.
Thanks!
Thanks for your recipe!
In Safari there is a small gap left of the submenu. It comes from -webkit-padding-start: 40px; for the ul. So i added a margin-left: -40px; to the .nav li ul to fix that.
Mario
Hi Michelle,
Thank you so much for this great tip. I have two questions:
Q1. When I tried to put the codes in the Child Theme style.css, it didn’t work for me. It works when put I put the code in Divi Theme Options epanel custom CSS section. I always have a child theme installed, but never know how to put codes in there. Do you think I might installed the child theme incorrectly?
Q2. Why can’t I get the two layers of the submenu in two different colours?
Much appreciated with your help.
This is the section of CSS where you can change the colour for the second layer:
.nav li.et-reverse-direction-nav li ulWith regards to the code in the child theme, this is usually one of 3 issues:
Your stylesheet is not enqueued properly in functions.php
You have an error in your code above the code you are adding
Caching
Hello Michelle. Thanks for the recipe.
I have tried the code in the child theme and in the Custom CSS like Michelle Wu, and it works in both places well. However, it does not work in the main parent theme’s style.css . I’m aware of the danger of this, it is just a local project where I do tests. Do you know the reason why this may happen?
By the way, and if you don’t mind telling us, what’s the coolest plugin/service that you use for comments? It is the bomb!
There is a CSS hierarchy in Divi, so putting the CSS in the places you have mentioned overrides the Divi stylesheet, as does a child theme. Placing it in the Divi stylesheet does not make the CSS more important than what is already there so you will get conflicts.
The comment plugin is WPDiscuz and I have a couple of premium addons, awesome isn’t it
https://en-gb.wordpress.org/plugins/wpdiscuz/
Thank you so much Michelle, really nice and simple.
Is there some easy way how to add delay after hover? I mean to keep the menu visible e.g. 0,5s after mouse leave the menu area.
Any help would be really appreciated! Thank you
You should be able to add an ease out value, check this link https://www.w3schools.com/css/css3_transitions.asp
Hey Michelle, thanks for the recipe. I’m also trying to add some delay to the menu, but I just can’t find the way to make the “ease-out” working. Any help would be much appreciated! Thanks
how to download?
Download what?
Thank you!
Hi Michelle, you truly are an inspiration! Love this menu, and it works just fine for me…just one little element I have come up against when you have a few top menu links with submenus. I can’t seem to solve it. For example: Two of the topmenu links have submenus but they are at opposite ends, one is centre place the other far right of centre place when the submenu opens up. The furthest link from centre shows no problem, but by the time the user goes to click on link in submenu. It’s gone. A frustratingly common user experience… Read more »
Do you have a link please Loren?
Hi Michelle,
the menu should looks like as it is on this website: http://www.sonnentor.at
Thanks and best greatings from Salzburg,
Artur
Wow, this is awesome! I’m jealous…
I would love to provide my developer with you example and your customized code…
Hi Michelle,
very tasty recipe
One question, how can i set the second menuline to be visible after redirected to the linked page of the link?
Thanks in advance,
Artur
Sorry but that would require JS Artur and that’s above my paygrade
It is possible, its just not something within my skillset
Doesnt work if you have “Borders LAYOUT” – the submenu width is through whole window and not match the width of the header. Second thing is what if you want the submenu to be vissible? the “visibility: hidden;” actually does nothing at all (tried to set it to visible or delete that row and no change at all).
Tom to use with a boxed layout change this section of CSS .nav li ul { visibility: hidden; z-index: 9999; position: fixed; width: 100vw; left: 0; padding: 0; text-align: center !important; border: none; background: #7bc5f7; box-shadow: none; } To this, where 1080px is the width of your boxed area. You can also use a percentage here if your boxed with is set in % .nav li ul { visibility: hidden; z-index: 9999; position: fixed; width: 1080px; left: 0; right: 0; margin: 0 auto; padding: 0; text-align: center !important; border: none; background: #7bc5f7; box-shadow: none; } You may need some media… Read more »
This is great – thank you so much for posting.. one question – is there anyway to make the submenu stay up once you click on the parent (instead of needing to rollover each time to see where I am)
I am sure its possible Caral but I think it would require some custom php which unfortunately is above my pay grade
Thanks for the quick reply Michelle!
Thanks, this looks great on my site!
Do you know if it would be possible to keep the submenu visible when visiting a subpage? That would solve some major issues for me…
Thanks for an awesome site, I use it all the time with great results!
Probably that would need some JS Anna and not my forte, have you considered creating a fullwidth menu or sidebar menu for the subpages?
Ok, thanks so much anyways!
Have been thinking about a sidebar, so will go through with that in stead. Once again, thanks for a life-saving site…
This was the solution to a long standing problem, thank you so much! In fact this may also solve the problem I have on a large website (80+ pages than all need to go in one menu!). If you have time, please consider answering the two questions below. If it works, I have the ultimate solution for large menu’s – Without a plugin! 1. How to adjust the space between menu items? 2. How to get the second level (see sub item 3 in your screenshot) to render a vertical dropdown, instead of also a horizontal menu? Q2 would solve… Read more »
Hi Verdi
To adjust the padding you can modify this code:
#top-menu li li {
padding: 0 20px;
}
For the other question I will take a loo if I get time
Hi Michelle,
Thank you very much for getting back to me.
Your fix changes the space within the menu item, but not between items.
I’ve changed the bottom portion of your script to this:
#top-menu li li a {
width: 100%;
padding: 0 20px;
}
And played with the values. Could not get it to work. What am I doing wrong?
Also, I can’t wait for you other answer. I think may Divi users with big websites (many pages) will be very happy with your solution.
For that you can also add margin: 0 1px;
Very tasty recipe Michelle!
How can this effect also been used for the top menu?
Greetings from the Netherlands
If you submit a recipe request Antal I will try to get it done
+1!
Hi Michelle
thanks for your recipes!
I wonder if we can fix the submenu once we are on a page in submenu level?
Regards
Can you elaborate please Max? I am having no issues on the when on the sub-pages???
Hi – please pardon what is sure to be a ridiculously simple question but when you say “All you need to do is add the following CSS to your Child Theme style.css or if you aren’t using a child theme” – where do I find the “Child Theme style.css”? Where is it located?
Thank you in advance.
Mary
Hi Mary
It sounds like you are not using a child theme, take at look at this article which should explain all you need to know
http://eileenlonergan.com/the-easiest-free-way-to-create-a-child-theme/
I really love your recipies!!!!!!!
I have a problem with this menu, because my web is in a box with 1024 width, could you check for me, please?
Thank you.
Hey Francisco. I haven’t tried it in a boxed layout yet but will try to have a look when I get the time
Thank you very much.
Hey Michelle,
thanks a lot for your recipies. They’re great and easy to follow especially as I’m just discovering Divi. In case you ever run out of ideas
I’m still trying to figure out a good way to make the blog posts fullwidth.
Sina
Hi Sina
When you say ‘I’m still trying to figure out a good way to make the blog posts fullwidth’ what exactly are you trying to get fullwidth?
Hi Michelle,
sorry just saw your answer today. What I meant was having the single blog post be without a sidebar. But by now I realized that with Divi I can design each blog post the way I want – so I can also make it fullwidth. As I said I’m still in the process of getting to know Divi
Glad you have it sorted Sina
Hi Michelle, I absolutely love your recipes
As a newbie to Divi and WordPress, I really appreciate all your tips and stuff!
How did you create those social media icons with the hover effects on the top of this page?
Hi Hindy
Thank you for your comments
The social icons are a plugin called WP Social Sharing
Pretty yet practical. Kudos!
Hehe, thanks Terry
Michelle,
There is a problem with the published code. Please check the first line:
*—–Slim Horizontal Submenus—–*/
There is a “/” missing at the beginning of the line. It is preventing the code being executed.
Probably this is the issue being faced by Lori Newman.
Today is just not my day! Thank you Manas, corrected
That would explain it – it was missing on my child theme – thought I was going nuts LOL Thanks for catching that!
It’s not working for me either on my client’s website, I removed all custom css plus disabled all plugins. Staging site at:
Thanks for any advice.
I don’t see the first part of the CSS in your stylesheet Lori, I can see the second part but that won’t work without the first bit, if I add it in dev tools its working fine.
Hi Michelle, It’s really strange, it was all in the child theme but not showing up, I put it in et theme options and it is working now- thanks this is awesome!
It’s awesome. Thanks for sharing.
Pleasure Manas
Wow! This is awesome, thank you so much Michelle
Welcome Graeme
Hmm… It’s not working for me.
Staging site:
http://screencast.com/t/2len0IYJ2U4
It moves some of the items to the right. Any ideas? Thanks!
You have some custom styling on your menu Phil, probably using pseudo elements and maybe some conflicting CSS in your stylesheet.
Lovely Snack, Michelle. Thank you!
Thank you Dehn