Banner styles

Inline banner style

A banner with inline style gets displayed on top of your page. In order to prevent any overlapping, Gleap moves down your body with a margin-top of at least 62px (depending on the banner height).

Moving down the body might cause display issues in certain circumstances. Simply overwrite the .gleap-b-shown and .gleap-b classes to customize the styles for your needs.

Default classes

.gleap-b {
    display: none;
    position: absolute;
    top: calc(-1 * var(--gleap-margin-top));
    left: 0px;
    width: 100vw;
    height: var(--gleap-margin-top);
}

.gleap-b-shown {
    transition: margin 0.3s ease-out;
    margin-top: var(--gleap-margin-top);
    position: relative;
    z-index: 10000;
}

Floating banner style

A banner with style "floating" gets displayed with position fixed above your content and is floating centered within your page. You can customize the styles by overwritting the .gleap-b class.

Default classes

.gleap-b-f .gleap-b {
    position: fixed;
    top: 10px;
    animation: gleapSlideIn .25s ease-out forwards;
    max-width: 800px;
    width: calc(100% - 20px);
    left: 50%;
    z-index: 2147483699;
    transform: translateX(-50%);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 5px 5px rgba(0, 0, 0, 0.05);
}

.gleap-b-f {
    margin-top: 0px;
}