How to place your Cue on top of all elements on your website?
If for some reason your Cues are showing behind certain elements on your website, then there’s probably an issue with the z-index.
The z-index property specifies the stack order of an element on your website.
An element with greater stack order is always in front of an element with a lower stack order.
If this is the first time you’re hearing about z-index then you should probably forward this help article to your developer.
There are two ways you can adjust your Cue notifications to show on top of other elements on your website.
Important note: if you have a cookie consent on your website, pay attention, since you don’t want Cue to overlap your cookie consent.
For this issue, find the z-index of the cookie consent and set the z-index of the #cue-notifier to be 1 number lower.
You can change it in the style tag in the <head>.
For this type of change, you can just apply this code snippet right above the closing style tag.</style>
As shown in the screenshot below:
If you do not wish to add these changes to your inline CSS, then you can always add them to the main file/stylesheet which you’re using for your CSS.
Whether it’s main.css or text.css just edit it and apply the code snippet.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
For more information about z-index, visit this article.
The z-index property specifies the stack order of an element on your website.
An element with greater stack order is always in front of an element with a lower stack order.
If this is the first time you’re hearing about z-index then you should probably forward this help article to your developer.
There are two ways you can adjust your Cue notifications to show on top of other elements on your website.
Important note: if you have a cookie consent on your website, pay attention, since you don’t want Cue to overlap your cookie consent.
For this issue, find the z-index of the cookie consent and set the z-index of the #cue-notifier to be 1 number lower.
<style> tag
You can change it in the style tag in the <head>.
For this type of change, you can just apply this code snippet right above the closing style tag.</style>
As shown in the screenshot below:
Globally accepted CSS file
If you do not wish to add these changes to your inline CSS, then you can always add them to the main file/stylesheet which you’re using for your CSS.
Whether it’s main.css or text.css just edit it and apply the code snippet.
#cue-notifier {
z-index: 1001;
}Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
For more information about z-index, visit this article.
Updated on: 10/03/2020
Thank you!