How To Center The Divi Menu Submenu Dropdown Tutorial by Pee Aye Creative

How To Center The Divi Dropdown Submenu

This quick Divi tutorial will show you how to center the Divi dropdown submenu using either the Menu module or the default Divi menu.

Center The Menu Module Submenu Dropdown

As we know, we are the only Divi tutorial site to have tons of Divi Menu module tutorials. We love it, and look how easy it is to center the dropdown submenu. Just place the following CSS snippet inside the Divi Menu Module>Advanced Tab>Custom CSS>Dropdown Menu Container.

left: 50%!important;
right: auto!important;
text-align: center!important;
transform: translate(-50%, 0)!important;

Center The Default Menu Dropdown Submenu

If you are still using the default Divi menu (not using the Theme Builder) then you are in luck because I decided to include you here today. Most of our tutorials are forward thinking and only for the new menu module, but we were feeling generous! For this one, just copy and paste the follow CSS snippet in your Divi>Theme Options>Custom CSS box.

/*center the default Divi menu submenu*/

#main-header .nav li ul {
	left: 50%!important;
	right: auto!important;
	text-align: center!important;
	transform: translate(-50%, 0)!important;
}

Add A Point On Top

At this point you should totally add a point to the top center. You can check out our other tutorion on How To Add  A Point On Top Of The Divi Submenu. This one will work for both menu types!

How To Add A Point On Top of a Divi Menu Submenu Dropdown Tutorial by Pee-Aye Creative

Customize Anything!

I highly recommend taking this further with more customization. You can check out our very thorough complete guide on How To Style The Divi Submenu for more ideas and instructions.

How To Style and Customize The Divi Menu Module Dropdown Submenu Tutorial by Pee-Aye Creative
9

Last updated Jul 10, 2020 @ 7:38 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

7 Comments

  1. Theresa

    Hi how does this work for sub sub menu it overlaps.

    Reply
      • Theresa

        Hi I removed the css as it was the sub menu of the sub ul li ul li
        It brought the sub sub menu overlapping the sub menu.

  2. Sean Callanan

    I’m trying this on a menu that is right aligned. Since the text on the main menu is right aligned, the submenu links are also right-aligned. I’d like to center them, but the CSS above is not changing them; they are still right aligned. Any ideas?

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart