Remove Bullet Points From Divi Footer

Last modified Sep 5, 2022

Difficulty Beginner

Language CSS

Category Design

Watch Tutorial

Useful links

Transcript:

Hey everybody, David here from Divi Space. By default, the Divi Theme adds bullet points to all of your list items in the footer area, so any widgets you add there come with an ugly bullet point.

Today I’m gonna show you how to remove bullet points from the footer by adding a few lines of custom CSS code or simply enabling the switch in the Divi Switch Plugin. Before you start, check our post that covers all the ways to add CSS code to your website. I always recommend adding CSS code to the child theme. The link is in the video description. Okay, here we go! In this example, I will head over to the theme customizer and additional CSS tab. I’m going to paste the code here, which you can find in the description of this video. It removes the bullet points and extra padding.

Another way to do this is by installing the Divi Switch plugin. Once Divi Switch is installed on your website, go to Divi Switch settings in your Divi Theme settings. Click the footer tab and enable the switch “Remove bullet points from footer” and this will automatically remove the bullet points. Simple, right? Thanks for watching! We’ll see you in the next tutorial.

CSS

#footer-widgets .footer-widget li:before {
    display:none;
}

#footer-widgets .footer-widget li {
    padding-left: 0px;
}

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 3.29.3 of the Divi Theme and Divi friendly hosting with PHP 7+.
If you think this code saved you time, we will be happy to receive a comment! :)

And subscribe to our youtube channel because there’s more to come!

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

7 Comments

Bernd on October 25, 2022 at 12:50 am

Hey, thank you very much, works great for me.
Would be even better if you could customize the symbol instead of just removing it.
But nothing is still better than thos ugly bullet points. 😀

Thanks again.
Reply
Renata Reinartz on December 30, 2021 at 9:47 am

Hi there! It did not work. Is it because I have mine setup as a global footer? Many thanks! Is there a way to change the CSS code for global footer.
Reply
- Anna Kurowska on January 3, 2022 at 11:56 am
  
  Hello, if you are building footer with Divi Builder and Theme Builder, and you are adding a list to the text module, you can remove bullet points through module settings. Design -> Text -> List -> Unordered List Style Type -> “None”
Lori on July 11, 2021 at 10:55 pm

It’s working for me! And it took me all day to find an answer on it, so thankful you’ve posted this!
Reply
- Joshua on July 12, 2021 at 3:44 pm
  
  So glad it’s working for you. Let us know if you need anything else.
Justin Ormerod on April 11, 2021 at 2:08 am

This CSS code no longer seems to be working.
Reply
- Anna Kurowska on April 12, 2021 at 2:54 am
  
  Hi Justin, I tested snippet with the latest WordPress and Divi version and everything seems to be working: https://tutorials.aspengrovestudio.com/remove-bullet-points-from-footer/. Make sure your CSS is loading and you pasted it to the right location and you cleared cache.
  If you have any issues, please send us more information with link to the website 🙂

Remove Bullet Points From Divi Footer

Watch Tutorial

Useful links

Transcript:

CSS

Does this snippet (still) work?

Your Comments

7 Comments

Submit a Comment Cancel reply

Build a Child Theme

How to Add JavaScript and jQuery to Divi

How to Add CSS to Divi

Recent Snippets

Categories

Recent Comments

Remove Bullet Points From Divi Footer

Watch Tutorial

Useful links

Transcript:

CSS

Does this snippet (still) work?

Related Snippets

How To Add More Social Media Icons to Divi’s Header and Footer