How to Reduce the Header “Bounce” in Composer 2 with Dynamic Padding

This article applies specifically to Composer 2.

If you are using Composer 2 with:

• Header Style 3, and

• Page Title Hero – Style 2

you may notice a slight “jump” or “bounce” in the page content when the page loads. This happens because the header is absolutely positioned over the page content within the Composer 2 layout.

We’ve introduced a setting that allows you to fine-tune the spacing and reduce this effect.

Step 1: Confirm Header Setup in Composer 2

Within Composer 2:

• Set your Header Style to Style 3.

• Set your Page Title Hero to Style 2.

• Ensure the header is absolutely positioned over the content.

Step 2: Adjust the Top Padding

To reduce the bounce effect in Composer 2:

Go to:
D&A Settings → Elements → Panels → Padding

Locate the field:
Padding Top (for dynamic header positioning)

Enter a custom value such as:

• 100px

• 120px

• 132px

Adjust this value until the content shift is visually reduced.

How It Works in Composer 2

Because the header sits on top of the content using absolute positioning, the page requires sufficient top padding to compensate for the header height. In Composer 2, this setting allows you to manually control that spacing on a per-page basis.

If you still notice movement after adjusting the padding, try slightly increasing the value until the transition appears smooth.

This gives you more precise control and allows you to optimise the experience per page rather than relying on a fixed global value.

How to Calculate the Correct Padding Value in Composer 2

Instead of estimating values such as 100px or 132px, you can inspect the live hero height in your Composer 2 page and use that exact measurement.

⚠️ Please note: The steps below involve using browser developer tools and are more technical. If you are not comfortable inspecting elements or using DevTools, please contact Support and we will be happy to assist you.

Step 1: Open the Page and Inspect the Hero

1. Load the affected Composer 2 page.

2. Right-click on the Page Title Hero section.

3. Select Inspect to open Chrome DevTools.

4. In the Elements panel, select the hero container element, usually the top-level hero wrapper within Composer 2.

Step 2: Get the Hero Height

With the hero element selected:

• Open the Computed tab.

• Find the height value shown.

OR

• Hover over the element in the DOM tree and view the size tooltip, for example:
  132px × 600px

The first value is the width.
The second value is the height.

You need the height value in pixels.

Example:

132px × 480px

In this case, the hero height is 480px.

Step 3: Apply the Height to Padding Top

Go to:
D&A Settings → Elements → Panels → Padding

Locate:
Padding Top (for dynamic header positioning)

Enter the hero height value, for example:
480px