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
2

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart