When you add any of the optional elements into your Divi secondary header navigation they will appear left aligned as shown in the 1st navigation menu below.
If you want to move the secondary menu telephone, email, and social icons to the center of your navigation as shown in the 2nd navigation below, you can use a few lines of CSS in your Theme Options or child theme stylesheet.
You can follow our other post If you would like to right-align your social media icons in your secondary navigation menu. If you are not sure where you should be adding your CSS you can read our guide on adding custom CSS in Divi.
How to center-align Divi secondary navigation elements
Add the following into your Divi Theme Options Custom CSS box, or into a child theme style sheet;
#et-info { float: none !important; text-align: center;}
How to add secondary header elements (Phone, email, social icons)
By default, the secondary menu does not show until you choose to add the optional elements into it. To do this you will need to open your Theme Customizer and navigate to Theme Customizer > Header & Navigation > Header Elements. Here you can add your phone number and email and check or uncheck to add social media icons and show search icons.
- Show Social Icons – If you have defined social profiles (in Divi Theme Options), then you can choose to display these in your secondary header.
- Phone Number – Once you add your phone number in the theme customizer it will display in the secondary navigation bar.
- Email – Once you add your email in the theme customizer it will display in the secondary navigation bar.
Tried it and it didn’t work.
Hi Gregg, try this code below:
/* Secondary menu alignment */
#et-secondary-menu {
float: none !important;
text-align: center;
}
It works! Thanks!
This did not work for me. However, this worked (note change from et-secondary-menu to et-info)
#et-info {
float: none !important;
text-align: center;
}
Thanks Dude!
Good Day, im stuck with the secondary menu.
i added 4 images and would like to change the layout of the images but when i move one image all move together, can you maybe assist me
thank you 🙂
Hi, I have links in secondary header. I’ve inserted logo as a link. Want links and image to vertical align to middle and also more logo in to centre horizontally. Any ideas?
Thanks for posting this, I tried the code and it worked just fine thank you!
Thank you for this snippet! Just a note that the code at the top doesn’t work because it’s missing a right brace } at the end. It’s likely why it didn’t work for Gregg below.
Thanks, updated the }
THANK YOU!
You’re welcome 🙂