Follow us

Make your submenus visible for longer - Tutorial for Divi | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

I’ve been meaning to work on this one for quite some time. I’ve seen so many questions about getting the submenus to stay visible for longer, not least in the comments on my own post How to Create Slim Horizontal Submenus, but no solutions. So this quick snack is to compliment that recipe on horizontal submenus and get them to stick around a bit (or a lot) longer.

Whilst I did work out a JS solution, I found it clunky and there were issues when using more than one submenu, so this solution I think works better and is easier to implement as it’s just CSS grin  .

So let’s get cooking!

Ingredients

 

The Divi Theme from Elegant Themes

 

Cooking time

 

Literally 5 minutes!

 

Preparation

 

 

For the best effect, I suggest first following my recipe on How to Create Slim Horizontal Submenus. This does work on the standard format submenus but I think it just looks nicer with horizontal ones. Also the code currently only works when using the fade in animation for the submenus. I will work on the other animation effects when I get time.

 

Method

 

Not much to it really, we just need to add the following CSS. Here’s what we are doing:

Firstly, everything is wrapped in a media query as we only want this effect on desktop, not when the menu switches to the mobile version.

Our first declaration is modifying what happens to the submenus when the focus moves away from them, instead of them disappearing we are telling them to stay there.

Next we are setting the animation that happens when the focus moves away from the submenus, the 3s value is our delay, so increase or decrease this depending on how long you want your submenus visible for before they fade out.

The next declaration just sets the animation on hover, so the speed at which the submenus fade in.

And lastly, we’re using the general sibling combinator (that’s the squiggly line) to hide all the submenus except the one that has focus.

 

@media (min-width: 981px) {
    .et-dropdown-removing > ul {
        display: block !important;
    }
    .nav li ul {
        -webkit-transition: .4s ease-in-out 3s;
        transition: .4s ease-in-out 3s;
    }
    .nav li ul:hover {
        -webkit-transition: 0.4s ease-in-out 0s !important;
        transition: 0.4s ease-in-out 0s !important;
    }
    #et-top-navigation nav > ul > li:hover ~ .et-dropdown-removing > ul {
        display: none !important;
    }
}

 

Copy and paste the CSS into your child theme stylesheet or Divi theme options custom CSS box.

And that’s it, pretty simple eh? 

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!