In today’s tip we will see, how we can center align both the Footer Menu and the contents of the DIVI Bottom Bar. The footer menu will only be visible if you have assigned a menu in the display location of “Footer Menu” in your WordPress dashboard . This is done by navigating to Appearance –> Menus as shown below.
Assign Footer Menu in DIVI
Once you have your footer menu assigned, you can change the background and text color by navigating to
DIVI –> Theme Customizer –-> Footer –-> Footer Menu
Editing the Bottom Bar :
You can add credits to the bottom bar like copyright info, company name etc by navigating to
DIVI –> Theme Customizer –-> Footer –-> Bottom Bar –> EDIT FOOTER CREDITS
You can also adjust the color for your social icons here.
Footer Content in DIVI
My Footer menu and bottom bar looks like the following without the CSS.
Footer Menu and Bottom Bar in DIVI
Center the Footer Menu and Bottom Bar Contents in DIVI using CSS
To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.
/* Center the Footer Menu in DIVI */
.bottom-nav {
float: none!important;
text-align: center!important;
}
/* Center the Bottom Bar in DIVI */
#footer-info {
width: 100%;
margin:0 auto;
text-align: center!important;
}
/* Adjust the margin of the social links DIVI */
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom:-28px;
}
}
Once you have applied the CSS the footer menu and the bottom bar content should be both center aligned as shown below.
Footer Menu and Bottom Bar centered in DIVI
I hope you enjoyed this quick tip and were able to center your Footer and Bottom Bar in your DIVI Theme. If you do not have a Footer Menu then only use the relevant CSS. For More DIVI TIPS and TRICKS make sure you visit my DIVI BLOG. If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.
9 Comments
Submit a Comment
I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.
That didn’t work for the footer menu it only worked for the bottom bar.
This all worked for me perfectly thank you! Like the fact that you included code for the social media icons as well much appreciated…
Thank you! Worked perfectly for me. It seems trivial, but that bottom copyright bar being left aligned has driven me nuts for 5 years. I appreciate being the recipient of your css knowledge!
Hi Kelly, I am glad this worked for you. Your site looks really good!
How to center the social icons in the bottom bar, though?
Very simple solution! Thank you for being clear, precise and to the point.
Oh my goodness – thank you so much for this. The bottom bar aligned left really bugged me – I’m so happy I was able to centre it following your instructions.
Thank you.
Hi Melina, Glad I could help.
OMG!!! It worked!!! Thank you so much…great info!