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

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

Footer Content in DIVI

 

My Footer menu and bottom bar looks like the following without the CSS. 

 

Footer Menu and Bottom Bar in DIVI

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 */
ul#menu-footer-menu {
float: none;
text-align: center;
}

/* 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

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.

 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

I would love to hear about how I can help your business website. I have specialized in using the DIVI theme from Elegant Themes since the past five years. If you would like to see the projects that I have completed as a DIVI Designer, please do have a look at my portfolio. Please contact me and I will get back to you immediately.

Share This