Move The Google reCAPTCHA v3 Badge Higher Up (To Prevent Overlapping)

Victor Duse

Feb 6, 2023

Comments

Editorial Note: I may earn a commission when you visit links on this website.

Is the Google reCAPTCHA v3 badge overlapping the cookie bar or the back to top button in the bottom of your WordPress website? Here’s is how you nudge up the badge to make more room.

Before

The Google reCAPTCHA v3 badge covers back to top icon

It’s a common issue that the reCAPTCHA badge is covering content in the bottom right corner, for example back to top buttons, cookie bars and chat widgets.

After

Move up the Google reCAPTCHA v3 badge

By moving the reCAPTCHA badge up a few pixels, other content in the bottom right corner will be visible instead of being hidden behind the badge.

By default, the Google reCAPTCHA v3 badge position is in the bottom right corner just 14 pixels above the bottom. In some cases, this makes the badge cover elements like back to top icons, cookie consent banners and other widgets. One way to solve this is to move the badge higher up on the page.

Move up the reCAPTCHA badge, step by step

  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 up */ 
    
    .grecaptcha-badge {
    bottom: 90px !important;
    }
  4. Save and preview in frontend.
  5. If needed, change the value 90px to find the right position for your web design.
  6. Clear your browser cache and website cache if the badge isn’t moved higher up.

Alternative methods to prevent overlapping

Instead of moving the badge higher up, you could also hide the badge (yes, that’s allowed) or move the badge to the left side. Check out the tutorials below to get started.

Good luck!

That’s all!

I hope that you enjoyed this post. Subscribe to VictorDuse.com 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

Victor Duse

By Victor Duse

Victor is a Swedish WordPress expert with +20 years experience of web development and marketing communications. Time away from keyboard is spent together with family and on Brazilian Jiu-Jitsu mats.

About Victor » 

Related posts

4 Comments

  1. Very Helpful. Thanks A Lot.

    Reply
    • Hi Sumit! Great, I’m glad it helped. 👉

      Reply
  2. thanks for this information! you have no idea how much I struggled to change the position of the recaptcha tag

    Reply

Submit a Comment

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