LearnDash Registration Window Obscured by Header in certain screen sizes

[scervera]

On my website using the Pro theme and LearnDash, the LearnDash registration window gets obscured by the Pro theme header at a breakpoint >1024px until you get out to 2116px. How can I adjust the CSS to correct this?

[christopher]

Hi Stephen,

Would you please kindly get back to us with the URL of the page that you gave the screenshot? I think the problem is that you set the header to be sticky, and it is natural that it will take up the screen when you have the header which I think is too thick for a sticky header.

You can consider the two solutions below:

1. Only make the second bar sticky and keep the first bar static. That way the menu section will stick only and it should work better.
2. Alternatively, you can go to Pro > Headers and select the header in question and click the Copy button to duplicate the header. Then from the right hand of the screen select the page that you added the LearnDash registration shortcode to show the duplicated header. Then you can go to the header and do changes such as avoiding the sticky mode for that specific page.

Thank you.

[scervera]

Hi, Christopher. Thank you for your help. Here is the URL: https://training.mensdiscipleshipnetwork.com/courses/spiritual-physics/

Click on “Login to Enroll” to get the registration modal to appear. I did have sticky set on the header, but even after I remove it the problem persists. I would appreciate any guidance you can give me to fix this. Many thanks.

Steve

[christian]

Hey Stephen,

This is a z-index conflict which can be resolved by reducing the Header Bars’ Z Index to 3 digits like 999. The default is 9999 so you need to edit the Z index of ALL Header Bars. I’ve tested that value and it works.

Hope that helps.

[scervera]

@christian, thank you. This definitely corrected the issue with the header obscuring the registration modal. However, there is still a positioning issue with the modal being too high. Please see the attached screenshot. Note how the top of the modal is cut off.

[christian]

Hey Stephen,

That one is not controlled by our theme. Please contact the Learndash support to fix the position of their modal.

Thanks.

[scervera]

@christian, you solved half the problem which was the z-index. Thank you very much. I was able to figure out the rest which was to adjust the top margin on the LearnDash modal. I’m providing the solution for others who may experience the problem:

@media only screen and (min-width: 1025px) {
  .learndash-wrapper .ld-login-modal {
    margin-top: 700px;
  }
}

[matt]

Appreciate your willingness to help others, Stephen, and glad you got it sorted. Have a great day!