LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Remove Bullets from Elementor Icon Lists in LearnDash Focus Mode

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

Many of you who use LearnDash also use Elementor to build your lesson & topic pages. This article addresses a very specific design issue when using the Elementor Icon List widget.

Elementor icon list with LearnDash bullet points

In LearnDash Focus Mode, Elementor icon lists have bullet points next to them, and this is not the expected behavior. This is because LearnDash’s CSS overrides Elementor’s CSS for icon lists.

I’ll provide the CSS to remove the bullets that LearnDash adds and return your Elementor icon lists back to normal.

The following CSS can be placed in a child theme CSS file, or the “Additional CSS” area of the Customizer.

.learndash-wrapper .ld-focus .ld-tab-content .elementor-icon-list-items:not(.blocks-gallery-grid):not(.wp-block-gallery) {
	list-style-type: none;
	padding: 0;

.learndash-wrapper .ld-focus .ld-tab-content .elementor-icon-list-items .elementor-icon-list-item:not(.blocks-gallery-item) {
	display: flex;

This CSS also removes some extra padding added by LearnDash. Elementor’s icon lists call for no padding, but LearnDash adds 40px of padding-left.

If you come across any other weird styling issues when using Elementor with LearnDash, please let me know in the comments and I’ll update this post with more solutions.


Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Get your LearnDash Mobile App →


Design Upgrade for WisdmLabs Ratings, Reviews & Feedback for LearnDash


Formatting Short Descriptions in the LearnDash Course Grid


  1. David Read

    hi there, I’ve had similar issue using the Elementor Essential Addons Feature List (which looks really nice), but in Learndash focus mode, it adds bullet points next to the icons on the left and screws up the formatting of the text next to it. Would the same code above work or would it need something different?

    • Hi David — It probably WILL NOT work. The class names used in the code above are specific to Elementor. The Essential Addons plugin most likely uses different class names. I don’t use the plugin myself so I can’t provide the working code. However, any CSS developer should be able to fix this for you in 5 minutes.

  2. Jack Riley

    Hi Dave,

    I’ve added this css and the bullets are no longer appearing – thanks! However this seems to be preventing the ‘inline’ layout from working, so a series of icons that I’d like to appear side-by-side are appearing one above the other. Do you know how to resolve this please?

    Thanks in advance!

    • Hi Jack — I can probably figure out some CSS for you, but I’d have to take a look at your specific site, and see exactly what your inline layout CSS looks like. Elementor has so many options that all output different styles. I would charge a small fee for my time, but this probably won’t take me more than 10 minutes to fix for you. I will need access to a lesson on your site. Email me if you’d like me to help: [email protected]

  3. Chris

    Hey Dave,

    Thanks so much for that.
    I added margin: 0px; as well and all looks good now

  4. Dave – just a quick post to, yet again, say “thanks” for this post. The bullet points anomaly was driving me nuts and your post made them go away.

  5. Meg

    Hi there! Thanks for this post! I am having the problem of double bullet points in my table of contents. Would this work for that as well, do you think? Thanks!

    • Hi Meg! It depends on where your table of contents is located on the page, and how you’re added it. Trying this code to see if it works shouldn’t hurt anything, so give it a whirl if you haven’t already. If it doesn’t work, feel free to shoot me an email with access to the page and I can help with the correct CSS. [email protected]

  6. Ion

    Thank you, Dave! It helped me out!

  7. Thanks for your post. It’s resolved my issue.

  8. Barbara

    Hi Dave – I tried the code above with no luck. The bullets only started displaying in the icons list this morning. They are showing in both courses as well as other places where I am using the elementor icon list. Any suggestions would be appreciated. Thanks!

    • Hi Barbara – It’s hard to say because every site, every theme, etc. is unique in the CSS that it uses. There could be a zillion different conflicts.

      I can take a look for you for a small fee. I’d need an admin login to your site and a link to a lesson/topic that has this issue. Email me ([email protected]) if you’d like me to take a look.

  9. Elyse

    This was driving me absolutely bonkers! Thank you for the quick fix.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén