Follow us

How to Create Slim Horizontal Submenus | Divi Soup

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 wink , 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? wink ). 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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. 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.

Related Posts

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

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!