Return to previous page

Adjusting custom chatbot position with Mobile Bottom Menu / Sticky Cart

This topic has 4 replies, 2 voices, and was last updated 12 hours, 25 minutes ago ago by Jack Richardson

khurram virk

Participant

March 3, 2026 at 09:32

Dear Sir,

Good Day To You.

I am currently using a custom chatbot plugin on my website, which displays a fixed chat icon in the bottom corner of the screen.

I am running into an overlap issue on mobile view and sticky cart. Whenever the XStore Mobile Bottom Menu or the Sticky Add-to-Cart bar slides onto the bottom of the screen, it overlaps my chatbot icon.

The Example Behavior I Want to Replicate:
I noticed that your native “Scroll to Top” button brilliantly detects when these sticky menus appear. It does not remain static; instead, it automatically adjusts its own position and jumps up so it doesn’t get covered by the sticky cart. I want my chatbot icon to adjust its position exactly like your scroll-to-top button does.

Reference Links:
Website: https://safeandsecureksa.com/
Example Product Page: https://safeandsecureksa.com/product/manual-hand-operated-portable-chain-lever-block-ratchet-hoists-and-pulls/
Screenshot of the overlap: https://prnt.sc/MLa0uXNfgCs3

My Question:
Could you please let me know if there is a built-in XStore JavaScript event trigger, a specific theme wrapper, or a native method that fires when these sticky bottom menus open and close? I would like to hook into your theme’s native event so I can automatically push my chatbot icon up in perfect sync with your menus.

Thank you for your help!

#466818 Copied

3 Answers
Jack Richardson

Support staff

March 3, 2026 at 10:35
Hello @khurram virk,

Please try adding the following custom CSS and then check the result:

:root { --et-custom-sticky-panel-h: 70px; } #skybot-root { transition: all .3s linear; } @media only screen and (min-width: 993px) { :root:has(.etheme-sticky-cart) { --skybot-icon-bottom-spacing: calc(var(--et-custom-sticky-panel-h) + 20px); } :root:has(.etheme-sticky-cart.outside) { --skybot-icon-bottom-spacing: 20px; } } @media only screen and (max-width: 992px) { :root:has(.et-mobile-panel-wrapper) { --skybot-icon-bottom-spacing: calc(var(--et-custom-sticky-panel-h) + 20px); } } @media only screen and (min-width: 993px) { :root:has(.etheme-sticky-cart) #skybot-root #chatbot-window.is-expanded { bottom: calc(var(--et-custom-sticky-panel-h) + 100px); } :root:has(.etheme-sticky-cart.outside) #skybot-root #chatbot-window.is-expanded { bottom: 100px; } } @media only screen and (max-width: 992px) { :root:has(.et-mobile-panel-wrapper) #skybot-root #chatbot-window:not(.hidden) { bottom: var(--et-custom-sticky-panel-h); height: calc(100vh - var(--et-custom-sticky-panel-h) - 120px); } }

Kindly remember to clear your browser cache as well as the cache in any caching plugins that may be installed on your store.

Best regards,
Jack Richardson
The 8Theme’s Team
#466822 Copied
khurram virk

Participant

March 4, 2026 at 04:44

Dear Sir,

Good Day To You.

I need some assistance adjusting the layout of the single product page specifically for mobile devices.

Currently, there is a large gap between the “Add To Basket” and “Buy Now” buttons, which is caused by the “OR” text separator. You can see the exact area highlighted in this screenshot: https://snipboard.io/mwDHJ3.jpg

Could you please provide the custom CSS to achieve one of the following on mobile view:

Significantly reduce the top and bottom spacing around the “OR” text so the buttons are closer together.

Alternatively, completely remove/hide the “OR” text and its associated spacing entirely on mobile.

Thank you.

#466849 Copied
Jack Richardson

Support staff

March 4, 2026 at 07:16
Hello @khurram virk,

You may use one of the following CSS snippets:

// To minimize the spacing

@media only screen and (max-width: 768px) { .et_product-block div.quantity~.et-or-wrapper { margin: 0; } }

// Or you can hide the separator on mobile devices

@media only screen and (max-width: 768px) { .et_product-block div.quantity~.et-or-wrapper { display: none; } }

Best regards,
Jack Richardson
The 8Theme’s Team
#466855 Copied
Viewing 4 results - 1 through 4 (of 4 total)