WP Sticky PRO keeps a selected WordPress element visible after it reaches the top of the page as a visitor scrolls. You can identify the target visually with the element picker or enter a unique selector based on its name, class, or ID. The picker identifies an element on the page; a selector names it in the page structure.

Selectors such as nav, #main-menu, or .menu-main-menu-1 may be enough. Use a more specific selector when needed. It must match exactly one element: if it matches none or more than one, the element will not stick.

Choose what stays visible

Use sticky behavior for menus, headers, widgets, sidebars, logos, call-to-action boxes, or banner ads. WP Sticky PRO supports multiple sticky components, with settings configured individually for each one.

Set placement and page conditions

• Top spacing: Set the space between the sticky element and the top of the page.
• Screen sizes: Set minimum and maximum screen sizes for sticky behavior, such as limiting it on smaller screens.
• Page exclusions: Choose posts, pages, categories, tags, and custom post types where the element should not be sticky.
• Push-up element: Choose another element lower on the page that can push the sticky element upward again.
• Admin Bar awareness: Account for the WordPress Admin Toolbar so the sticky element does not obscure it or sit behind it.
• Z-index: Adjust stacking order if another page element overlaps or shows through the sticky element.

Modes and debugging

Legacy Mode uses the older method of making elements sticky. Dynamic Mode is available with Legacy Mode to address issues that can occur with responsive themes. Debug Mode shows error messages in the browser console to help identify possible reasons an element does not stick.

Set up a sticky element

1. Install and activate WP Sticky PRO in WordPress.
2. Choose an element with the visual picker or enter a unique selector.
3. Set top spacing, screen-size limits, and page exclusions as needed.
4. Configure push-up behavior, Admin Bar handling, and Z-index settings.
5. If the element does not behave as expected, use Debug Mode to check the browser console.