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

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

  1. Tom

    That didn’t work for the footer menu it only worked for the bottom bar.

    Reply
  2. Jeff Moyer

    This all worked for me perfectly thank you! Like the fact that you included code for the social media icons as well much appreciated…

    Reply
  3. Kelly & Her Camera

    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!

    Reply
    • Girish Dadlani

      Hi Kelly, I am glad this worked for you. Your site looks really good!

      Reply
  4. Jimmie

    How to center the social icons in the bottom bar, though?

    Reply
  5. Emma

    Very simple solution! Thank you for being clear, precise and to the point.

    Reply
  6. Melina Abbott

    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.

    Reply
  7. BELLA CHARTRAND

    OMG!!! It worked!!! Thank you so much…great info!

    Reply

Submit a Comment

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

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.