The Steady Overlay button hides important parts of my website

Last updated 4 months ago

If the hovering button on the bottom of the screen (the Steady Overlay) is blocking important elements of your website (such as a navigation bar on mobile devices, or photo gallery captions), you can try these fixes:

Overlay covering an element: You can change the distance between the button and the bottom of the screen in your Steady Overlay settings. Increasing number of pixels will move the hover button upwards to unmask an important object at the bottom of the screen.

Button takes up too much space on small screens: Since 12.12.2017, the hover button disappears on small screens (such as smartphones) as you scroll down to make more room for your content. The button will reappear when viewers scroll up again. 

Overlay hides photo captions in image galleries: If you have an image gallery on your publication website, and the overlay button hides your photos or captions, you can do the following: You can edit your website’s code to ensure photo galleries appear above the Steady Overlay (this is done directly on your website or blog, not through the Steady settings). To do so, you must edit the so-called z-index of hover items. The z-index controls the level at which objects appear. If you place the Steady Overlay at a level below the image gallery, then photos will appear above the button, and the button won’t cover your images any more. By default, the z-index of the Steady Overlay is set at 999999999 (a very high value, to ensure it hovers over everything). You can reduce the value by editing the <HEAD> section of your website code as follows:

<style type="text/css">
  #steady-widget-button {
    z-index: 999999999;
  }
</style>

A second method is to edit the z-index directly in your CSS code, as follows:

#steady-widget-button {
  z-index: 999999999;
}