Close button background - floating review badge

Ask the Community General Questions
1

Why is the background colour on my close button blue? - how do I remove the close button background colour?

Please see the attached image.

2 Likes
3

Hi there, @Scott_Brennan and welcome to the Community :waving_hand:

This issue appears because of the conflict with the styles of your website. Could you please send me a link to the page, where the widget is installed? We’ll be happy to fix it :slightly_smiling_face:

1 Like
4

Hi Max, thank you for your help.

The current published site is: www.migrationunity.com

The site is currently undergoing a redesign and is being edited under: https://webstages.com.au/migrationunity-e/

Once the redesign is complete, it will override the top domain.

1 Like
5

Thank you!

To fix the issue, please add this code to the Custom CSS field on the Style tab of your widget’s settings:

[class*="CloseComponent__PopupCloseControlContainer-sc"],
.es-close-button {
  padding: 0 !important;
}

[class*="CloseComponent__PopupCloseControlContainer-sc"],
.es-close-button:not(:hover) {
  background: none !important;
}

We’ve also noticed you’re using the code below in the Custom CSS field:

localStorage.removeItem('Reviews.closed-elfsight-floating-badge.27d600d2-e8ac-431b-ace2-d3182b394e08');

This is a JS code and if you’re going to use it further, please remove it from the Custom CSS and to the Custom JS field :slightly_smiling_face:

6

Thank you!

Is there a way to make the floating badge disappear/close when a pop-up is opened on our website? Unfortunately, when people are completing our website enquiry form, the floating badge is in front of the form on mobile. I added a close option to the widget, but when people are completing our enquiry form and click close on the widget, it closes the full website pop-up form too, and they lose all of their text.

1 Like
7

Hi there, @Scott_Brennan :waving_hand:

Please try to use this CSS code:

[class*="BadgeContainer__Inner-sc"] {
z-index: 9000 !important;
}

If it doesn’t help, please add the badge back to the mobile version (it seems to be hidden now). We’ll be happy to look into this :slightly_smiling_face:

1 Like
8

Hi Max, thank you for your help.

I have added that code to the CSS, and the badge is on mobile, but when I click a CTA button on the site, and the pop-up opens, the badge is in front of the form, and when I close the badge, it also closes the pop-up form.

This is the site url for design/editing: https://webstages.com.au/migrationunity-e/

We are in the process of publishing it today/tomorrow and once finalised it will overide our current site the new url will be: https://migrationunity.com/

1 Like
9

Got it, thanks!

We’ve fixed the issue using this CSS code:

.global-styles, #elementor-popup-modal-1157 {
  z-index: 1000000 !important;
}

Please check your website and let me know if it’s fine now :slightly_smiling_face: