> ## Documentation Index
> Fetch the complete documentation index at: https://docs.molin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Move the chat bubble out of the way

> Add a CSS variable to your shop when something covers the chat bubble, like an add-to-cart bar that slides in as visitors scroll.

Shops on any platform can push the chat bubble away from any screen edge with a CSS variable. Use it when something on your page covers the bubble, like an add-to-cart bar that slides in when visitors scroll, a cookie message, or a button fixed to the side of the page.

| Variable                       | Moves the bubble         |
| ------------------------------ | ------------------------ |
| `--molin-bubble-offset-bottom` | up, away from the bottom |
| `--molin-bubble-offset-left`   | in from the left         |
| `--molin-bubble-offset-right`  | in from the right        |

Use the one that matches the corner your bubble sits in, which you pick in [**Chatbot → Design**](https://molin.ai/app/design).

## Add it to your theme

Set the variable to the height of the thing you want to clear, plus a little breathing room. Nothing moves until you set it:

```css theme={null}
body {
  --molin-bubble-offset-bottom: 88px;
}
```

To move the bubble only while the bar is on screen, put the variable on the class your theme adds when the bar appears:

```css theme={null}
body.sticky-atc-visible {
  --molin-bubble-offset-bottom: 88px;
}
```

Or set it from your own code:

```js theme={null}
document.documentElement.style.setProperty('--molin-bubble-offset-bottom', '88px');
```

Set it back to `0px` and the bubble returns to its normal spot. It slides between the two, so the move is smooth.

## What else moves

The pop-up message, the "Try it out" hint, and the [floating bar](/home/widget/floating-bar) move with the bubble, so they stay out of the way too. The open chat window shifts sideways but never up, since it already reaches the bottom of the screen.

## Tips

* One value covers phones and computers. Use your own media queries if the bar is a different height on phones.