R14: How to Create Slim Horizontal Submenus

by | May 15, 2016 | Menus

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

How to Create Slim Horizontal Submenus

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.

Slim Horizontal Sub Menu Tutorial for Divi

So let’s get cooking!


The Divi Theme from Elegant Themes


This should take you around 5 minutes max.


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.


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

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educatorΒ as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook



WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!