Return to previous page

Chatbot Button Overlapping Mobile Panel and Sticky Cart Despite Custom CSS

This topic has 4 replies, 3 voices, and was last updated 2 months, 1 weeks ago ago by Luca Rossi

khurram virk

Participant

September 13, 2025 at 11:57
Dear Sir,

Good day to you.

On my website, I added a chatbot, but its icon is not responsive on mobile view. It overlaps the mobile panel, as shown in the screenshot:

📸 Screenshot 1: https://snipboard.io/hnUY0Q.jpg

Additionally, on the product page in mobile view, the chatbot button overlaps the sticky cart:

📸 Screenshot 2: https://snipboard.io/oxJbGw.jpg

I tried resolving this by adding the following code in Additional CSS, but the issue still persists:

/* =================================================================== */ /* == FINAL v4: Correct Positioning for Chatbot Icon on ALL Views == */ /* =================================================================== */ /* 1. Base Position (Desktop, regular pages) */ :root { --skybot-icon-bottom-spacing: 30px !important; --skybot-icon-right-spacing: 30px !important; } /* 2. Desktop Product Page Adjustment */ @media (min-width: 768px) { body.single-product { --skybot-icon-bottom-spacing: 80px !important; } } /* 3. Mobile View Adjustment (Covers all mobile screen sizes) */ @media (max-width: 767px) { /* This rule targets the plugin's main container on small screens */ #skybot-root { bottom: 80px !important; } }

Even after applying this, the chatbot icon continues to overlap with the mobile panel and sticky cart.

Can you please guide me on how to properly fix this issue so that the chatbot icon always stays above the mobile panel and sticky cart in mobile view?

Thank you.
#454917 Copied
3 Answers
Alex Carter

Support staff

September 13, 2025 at 14:35
Hello,

Thank you for reaching out to us.

Please try to use this code in Theme Options > Theme custom CSS > Mobile:

#skybot-root #chatbot-icon { bottom: 120px !important; } body:not(.rtl) .etheme-sales-booster-sticky-panel[data-position=auto] { bottom: 70px !important; }

Warm Regards,
The 8Theme Team
#454922 Copied
khurram virk

Participant

September 24, 2025 at 10:50

Dear Sir,

Good day to you.

Thank you for your response.

I added the code you provided, and it worked partially — but now the WhatsApp button is showing at the bottom-right, while the chatbot button appears above it.

My requirement is a bit different:

The chatbot button should always stay at the bottom-right corner, positioned above the mobile panel and sticky cart in mobile view.

The WhatsApp button should appear at the middle-right side (not overlapping the chatbot).

📸 Page Links & Screenshots for reference:

https://skysolmedia.com/
https://snipboard.io/Wr54AV.jpg

https://skysolmedia.com/product/ai-chatbot-development/
https://snipboard.io/XIPkgc.jpg

Could you please guide me with the correct CSS adjustments to achieve this layout?

Thank you.

#455732 Copied
Luca Rossi

Support staff

September 24, 2025 at 14:18
Hi @khurram virk,

Please add this custom CSS code also:

@media (max-width: 480px) { body #skybot-root #chatbot-icon { bottom: 80px !important; } body:not(.rtl) .etheme-sales-booster-sticky-panel[data-position=auto] { top: 50% !important; bottom: auto !important; } }

Let us know how it goes!
#455779 Copied
Viewing 4 results - 1 through 4 (of 4 total)