1. Home
  2. Troubleshooting
  3. WalkMe Items Appearing Above or Below Site Elements? Change the Layer Order (Z-Index)

WalkMe Items Appearing Above or Below Site Elements? Change the Layer Order (Z-Index)

Updated on January 24, 2019
Download PDF

Brief Overview

Z-index specifies the stack order of an element compared to other existing elements on the same webpage. An element with a greater stack order will be in front of an element with a lower stack order.

In some cases, you will wish to change the stack order, for example, when a balloon is blocking a calendar menu to which the user needs access. This article will show you how!

Steps for Changing Your Elements’ Layer Orders (Z-Index)

  1. Click on the WalkMe item whose stack order (z-index) you would like to adjust in the Smart Walk-Thru canvas;
    • This will reveal the Step’s Step Options Menu:
  2. Click the Appearance tab;
  3. If you have not already done so, click on Arrange Layer Order (z-index) and toggle z-index ON. If you have done this, skip to the next step:
  4. Now, either click Customize On Screen within the Arrange Layer Order (z-index) section, or click the Customize on Screen! button atop the Step Options Menu:
  5. You should now see the Step you created in context, and the Editor will show your layer order arrangement options:
  6. Depending on your intent, either click Bring forward (if your element is being hidden by a different website element undesirably) or Send backward (if your element is hiding a website element it shouldn’t be);
  7. Click Select on-screen Element;
  8. Click on the on-screen element you want your Step’s anchor element to either go in front of or move behind.
    • Once you click the element, look at the Define z-index value manually section; you should see the z-index value change automatically (if a change was necessary) to reflect the required z-index to achieve your desired effect:

Z-Index Pro-Tips

  • You can also modify the z-index value manually by entering a value under Define z-index value manually;
  • Depending on your website’s structure, in some cases changing the z-index won’t have the desired effect. In this case, we recommend using Lock to Element in addition to z-index;
  • Salesforce Lightning does not support Arrange Layer Order (z-index).  Instead, you can adjust z-index value manually or use Lock to Element;
  • This feature is available for use in Smart Walk-Thrus, SmartTips, and Launchers.

Was this article helpful?

Related Articles