LDX Design

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.

Recommended ProductKinsta hosting to boost site speed

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.

Previous

Design Upgrade for WisdmLabs Ratings, Reviews & Feedback for LearnDash

Next

Formatting Short Descriptions in the LearnDash Course Grid

21 Comments

  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: support@escapecreative.com

  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. support@escapecreative.com

  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 (dave@escapecreative.com) if you’d like me to take a look.

  9. Elyse

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

  10. This code didn’t seem to work for me. Bullets shown to the left of items list in footer.

    • Hi Elizabeth — This code will only work for the main content area. It will not work for anything in your footer.

      However, this begs the question, how are you adding a footer to the LearnDash focus mode? LearnDash’s focus mode removes your theme’s footer, and does not display it. How have you added it back in?

  11. Hi Dave, I have this problem but it isn’t happening all the time. Just when the page loads for the first time, then it disappears and looks fine. ¿Is that also something that will be corrected with the CSS that you provided?
    Thank you

    • It’s hard to say. This could be happening because your server might be slow to load the CSS, so you see it initially, then the CSS loads to hide it, so then it disappears. But I can’t be 100% sure.

      I would try using my CSS and placing it in the Appearance > Customize > Additional CSS area, then clear your cache, and then see what happens.

Leave a Reply

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