LearnDash + Divi – Issues & Solutions

If you’re using Divi along with LearnDash, you might be running into some issues. The most common issue is that the LearnDash Focus Mode width you set in your LearnDash settings is not being respected. Content is appearing on the page with a very small width, as opposed to taking up the full screen or full width of the content area.

This article will explain all the issues we’ve found with Divi & LearnDash, and provide solutions for fixing them.

Divi & LearnDash Focus Mode Width Issue

Is your content not stretching the full width of the content area in Focus Mode? I’ve seen this happen with video embeds, as well as lessons & topics that have very limited content (only a few words or one sentence). As you write more, the width expands with your content.

This is happening because Divi adds a <div> to the Focus Mode markup that most other themes don’t, and this causes a CSS conflict. You can see this extra <div> in the screenshot below (highlighted in blue).

The Solution

To fix this issue, use the following CSS code.

1. Navigate to Appearance > Customize
2. Click on Additional CSS
3. If CSS is already present, put your cursor at the bottom on a new line
4. Paste the following CSS
5. Click the “Publish” button at the top

.learndash-wrapper .ld-focus .et-boc,
.learndash-wrapper .ld-focus .et-boc .ld-focus-main .ld-focus-content {
	width: 100%;
}

LearnDash Login Modal Behind Sticky Header

When you use sticky headers or top navigation in Divi, they apply a really high z-index to them. z-index is a number that determines where an element shows up on the z axis (think 3D, the element popping off the screen). The lower the z-index, the closer to the screen. Higher z-index values will appear closer to your eyes (aka: in front of elements with a lower z-index).

The LearnDash login/registration popup modal uses a z-index of 999. I’ve seen Divi headers use a z-index of 99999, and sometimes even 100000. Since these are higher, it means your Divi header appears over top of the LearnDash login popup.

The Solution

You can apply the following CSS to fix this issue. Add the CSS to Appearance > Customize > Additional CSS, and click the Publish button when you’re finished.

.learndash-wrapper .ld-modal {
	z-index: 100001;
}

This should move your LearnDash login popup in front of all other elements. If it doesn’t work, adjust the code above to use a higher number.

Divi Theme Builder Missing LearnDash Breadcrumbs & Navigation

It has been reported that when using the Divi Theme Builder for LearnDash post types (lessons & topics), two LearnDash elements do not get output on the page.

• Breadcrumbs (at the top, above the content)
• Navigation (previous/next lesson & topic buttons at the bottom)

And because LearnDash does not provide any shortcodes to output these elements, there is no way to insert them onto the page with the Divi Theme Builder.

Currently, there is no solution for this. If you are given one by Divi or LearnDash, we’d love to hear about it in the comments.

---

Those are the only consistent Divi/LearnDash issues we’ve discovered so far, but if you are having other issues, please let us know in the comments so we can update this article.