Skip to content
PageTruth
Widget

Push the page aside with the side panel

By default the side panel slides over your page. Turn on push mode and it slides in beside it instead: your page narrows to make room, so nothing is hidden. This help centre works that way: open Ask PageTruth to see it.

2 min readUpdated 18 Oct 2026

Before you start

  • The widget uses the Side panel layout. Push mode only applies to it.

Three steps

  1. Turn on push mode

    Choose Widget in the sidebar. Under Behaviour, turn on Push the page aside, then choose Save changes.

  2. Check your fixed elements

    Push mode moves everything in your page's normal flow, including sticky headers. An element with position: fixed stays where it is unless you tell it to follow:

    .your-fixed-header {
  right: var(--pagetruth-push, 0);
}

    While the page is pushed, <html> also has the class pagetruth-pushed, so you can adjust anything else that needs it.

  3. Override it on one page (optional)

    Add data-push="true" or data-push="false" to the script tag to change it for that page only.

You're done when

Opening the panel narrows your page smoothly, and closing it gives the space back.

If something's not right

On my phone it still covers the page

Screens narrower than 900px don't have room beside the page, so the panel always covers it there.

My header stays under the panel

It's probably position: fixed. Add the right: var(--pagetruth-push, 0) rule above (or left, for a panel on the left).

Was this helpful?