Is the Google reCAPTCHA v3 badge hidden behind the footer or other content on your WordPress website? Here’s is how you solve the overlapping problem!

After

The fix in this blog post will force the reCAPTCHa badge to always be displayed in front of your content.

The CSS property that decides the stack order of elements on a website is called z-index. An element (for example a badge) with a greater z-index is displayed in front of an element with a lower z-index.

In this particular case, we need to give the reCAPTCHA badge a greater z-index value then the overlapping content on the page.

Move the reCAPTCHA badge in front of your content

1. Log in to your WordPress dashboard
2. Go to Appearance » Customize
3. Click Additional CSS and paste the snippet below:

    /* Move reCAPTCHA v3 badge in front */
   .grecaptcha-badge {
   z-index:999;
   }

4. Save and preview in frontend.
5. Clear your browser cache and website cache if the badge isn’t in front.

Why you should avoid z-index:999999999

So why not add a hugh number to make sure that the badge will always be on top? It would work but the problem is that you don’t want the badge to overlap some types of content, for example:

• Cookie bars
• Lightboxes
• Pop ups
• Menus
• Close buttons

My recommendation is to start with a small number and adjust it until you are happy. In my test design with a Divi layout pack the z-index:1 was actually enough.

Other solutions

If the reCAPTCHA badge is overlapping your content in a negative way and prevents your users from seeing or clicking it, you might want to try one of these fixes instead:

• Hide the Google reCAPTCHA v3 badge (while being Google compliant)
• Move the Google reCAPTCHA v3 badge to the left side
• Position the Google reCAPTCHA badge higher up

Good luck!

That’s a wrap!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How to add Google reCAPTCHA v3 to a Divi Contact Form

👉 Related post: How to design a stunning Contact page with Divi