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.

Previous

Design Upgrade for WisdmLabs Ratings, Reviews & Feedback for LearnDash

Next

Formatting Short Descriptions in the LearnDash Course Grid

6 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: [email protected]

  3. Chris

    Hey Dave,

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

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén