LearnDash Design & Tutorials

LearnDash Design & Tutorials

LearnDash + Divi – Issues & Solutions

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.

If you’re using Divi along with LearnDash, you might be running into some issues. The most common issue is that the 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.

NOTE
We highly recommend not using Divi as a page builder. We’ve seen it drastically slow down sites & cause a lot of issues, not just with LearnDash but with other plugins too.

We recommend Elementor Pro instead →

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).

Code for Divi with LearnDash focus mode

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.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Learn More →

Previous

Course Grid in 1 column? Grid CSS not loading? Here’s the fix.

Next

The Best LearnDash Hosting: What to Look For + Top Recommendations

15 Comments

  1. Thanks for this, been setting out courses and having a wee bit of trouble with this. Will run with this code and keep an eye on it.

    But overall in love with LearnDash and Divi for building courses. I am coming off Moodle and this is feeling good.

    Especially that ability to move my H5P development into it. Match made in heaven.

    • 🙌 Glad you were able to use this.

      WordPress provides a ton more flexibility, especially when it comes to design 👍.

  2. Jorge Almiñana

    Awesome!!! I had this trouble and it was so easy! Thanks!

  3. Hi there! Thank you for sharing this! I was able to use your code snippet to fix the modal box problem, many thanks! An issue that I’m having is the inability to use the Divi theme builder on course and lesson pages. When I activate the Divi theme builder on any LearnDash page, the breadcrumbs at the top and the buttons at the bottom disappear. Any idea on how to fix this please? Thank you in advance!

    • Hi Christina — Unfortunately, no. I know LearnDash only officially supports the Elementor Theme Builder. I don’t know that they test LearnDash with the Divi Theme Builder. It’s likely just something with the LearnDash & Divi code not being compatible.

      I recommend you start by reaching out to Divi to see if there’s anything they can do to make the Divi Theme Builder compatible with LearnDash post types. If they don’t help, then I’d reach out to LearnDash support and ask them if they can look into it.

      If you get a positive response, I’d love for you to report back here so I can help spread the word for others. Good luck!

  4. Sarah

    Tried your solution for the “LearnDash Login Modal Behind Sticky Header” but it doesn’t work 🙁 looks like the CSS is overwritten by LearnDash’s css 🙁 anyone else having the same issue?

  5. Sarah

    Aggghhh Dave, I am so silly and extremely sorry to have wasted your time – I have to purge my cache from the cloudflare account :/ but thank you so so much for getting back to me so quickly!

    This is an awesome and very helpful blog by the way!!! 😉

  6. Great Dave !!!
    Thanks for sharing this! I was able to use your code snippet to solve the modal box problem, thank you very much!

    But I have two other problems:
    1. If I create a custom course page for all my courses, the courses don’t appear on the page made by Divi – Theme Builder – all the courses.
    2. This problem is independent of the first one.

    I sent you screenshot plus links.

    Thank you very much for your help.

  7. Merci pour cette solution
    Ca fait un an que j’ai demandé à LEARNDASH et à DIVI de voir s’ils pouvaient trouver une solution : En vain

    Et encore aujourd’hui : pas de solution
    Donc merci beaucoup : Cela va améliorer considérablement l’experience de l’élève

  8. Hola Dave,

    I am writing to you here as well.
    I used the css code and it is not working.
    Focus mode on.
    Full with on that lesson
    But still you can see the lesson is not full with or I cannot modify it by the divi builder.

    Apart from this, everything else is workig fine.

    Gaby

    • Hi Gaby,

      Without seeing your lesson page, I can’t tell you what’s going wrong. But if you are willing to provide me access to the page, I can take a look and see if I can fix it. You can email me with the login info at [email protected].

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén