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

How To Center The Divi Dropdown Submenu

Nelson Miller Pee Aye Creative
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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

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. Required fields are marked *

Recent Posts

0

Your Cart