My bar is covering another element

There are times when the Quick Announcement Bar ends up covering another element when it should stay behind. In this example, the bar should be behind the cart drawer, but you can see that it's covering the top:

This is because both elements have a property called the z-index. The item with the higher z-index will be in front of the other.

To fix it, you can try adjusting the z-index of the bar, to get it behind the drawer.

To get started, in the custom code area of the bar configuration (at the bottom of the page), copy and paste in the following code:

<style>
#qab_background{z-index: 99 !important;}
</style>

Like so:

The simple (but less precise) way to proceed is to just guess a low number and see if it works. You can start with 99. Simply save the bar and test the page to see if the issue is resolved. 

If the bar still covers other elements, pick a lower number, say 50, and test. 

Keep trying this until the bar is no longer covering elements that it shouldn't. 

The advanced (and more precise) method involves using the browser inspector to get the z-index of the element. That method is beyond the scope of this tutorial.  

If you have any trouble adjusting the z-index, please contact us at help@hextom.com