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.