Center The Divi Submenu
By now you know that we are the #1 source for any Divi tutorial related to the menu. We keep thinking we are done because we already have 20 Divi menu tutorials. But this one is another one of those quick extra bonus snippets that you can add to our other tutorials, especially the one about customizing the Divi submenu. You can add this one to the list, and easily center the Divi dropdown submenu.
▶️ Please watch the video above to get all the exciting details! 👆
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!
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.
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?
I would need a link. I saw some people reporting a bug in Divi like this in one of the latest updates.