How to Create Slim Horizontal Submenus

by | May 15, 2016 | CSS Tips & Tricks, 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!

ingredients

The Divi Theme from Elegant Themes

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer 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 me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

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

You have successfully joined the waitlist!