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
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
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
- Log in to your WordPress dashboard
- Go to Appearance » Customize
- Click Additional CSS and paste the snippet below:
/* Move reCAPTCHA v3 badge up */ .grecaptcha-badge { bottom: 90px !important; }
- Save and preview in frontend.
- If needed, change the value 90px to find the right position for your web design.
- 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.
- Hide the Google reCAPTCHA v3 badge (while being Google compliant)
- Move the Google reCAPTCHA v3 badge to the left side
Good luck!
That’s all!
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
Very Helpful. Thanks A Lot.
Hi Sumit! Great, I’m glad it helped. 👉