---
title: "Display the Close Button on the Left - EngageBox"
description: "By default, EngageBox displays the close button in the top-right corner of the popup. If you’d prefer to show it on the top-left side, this can be d"
url: "https://www.tassos.gr/docs/engagebox/customize/close-button-on-the-left"
date: "2026-04-29T20:37:32+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Styling and Customization ](https://www.tassos.gr/index.php?option=com_content&view=category&id=72)

#  Display the Close Button on the Left

By default, EngageBox displays the close button in the top-right corner of the popup. If you’d prefer to show it on the top-left side, this can be done easily with a small CSS override, as there’s no built-in UI option for this change.

## [Steps](#steps)

1. Edit your popup in the backend.
2. Go to the Advanced tab.
3. In the Custom CSS field, add the following code:

 ```
.eb-{eb.id} .eb-close {
    right: auto;
    left: 0;
}
```

Note: You can leave {eb.id} as-is to let EngageBox replace it automatically with the popup’s ID.

Once saved, the close button will appear on the left side of your popup.

 Last updated on Jul 19th 2025 09:07

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "EngageBox",
            "item": "https://www.tassos.gr/docs/engagebox"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Styling and Customization",
            "item": "https://www.tassos.gr/docs/engagebox/customize"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Display the Close Button on the Left",
            "item": "https://www.tassos.gr/docs/engagebox/customize/close-button-on-the-left"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/engagebox/customize/close-button-on-the-left"
    },
    "headline": "Display the Close Button on the Left",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/engagebox/customize/close-button-on-the-left"
    },
    "datePublished": "2025-07-19T09:41:04+03:00",
    "dateCreated": "2025-07-19T09:41:04+03:00",
    "dateModified": "2025-07-19T09:43:34+03:00"
}
```