How to Reduce Header “Bounce” with Dynamic Padding (Composer 2)

This article applies specifically to Composer 2 websites.

If you are using:

• Header Style 3
• Page Title Hero – Style 2

you may notice a slight “jump” or “bounce” in the page content when the page first loads.

This happens because the header is absolutely positioned over the page content. As the page renders, spacing is applied dynamically, which can briefly shift the content before the layout settles.

To help reduce this effect, Composer 2 includes a setting that allows you to manually adjust the top spacing.

Step 1: Confirm Your Header Setup

Before adjusting the padding, make sure your page is using:

• Header Style: Style 3
• Page Title Hero: Style 2
• A header configured with absolute positioning over the page content

Step 2: Adjust the Dynamic Header Padding

To reduce the bounce effect:

1. Navigate to:

   D&A Settings → Elements → Panels → Padding

2. Locate the field:

   Padding Top (for dynamic header positioning)

3. Enter a custom value such as:
   • 100px
   • 120px
   • 132px
4. Save and refresh the page.
5. Adjust the value until the page transition appears smoother and the content shift is reduced.

Recommended Method: Match the Hero Height

For the best results, you can calculate the padding value based on the height of your Page Title Hero section.

This provides more accurate spacing and helps minimise layout shifting during page load.

How to Find the Correct Padding Value

Step 1: Open the Page

Open the page where the bounce effect is happening.

Step 2: Inspect the Hero Section

1. Right-click anywhere on the Page Title Hero section.
2. Select Inspect from the menu.

This will open your browser’s developer tools.

Step 3: Select the Hero Container

Inside the developer tools:

1. Move your mouse over the highlighted HTML elements.
2. Select the main hero container element, usually the top-level wrapper for the Page Title Hero.

As you hover over elements, your browser will display a size tooltip.

Example:

132px × 480px

• The first number is the width
• The second number is the height

In this example, the hero height is:

480px

Step 4: Apply the Height Value

1. Navigate back to:

   D&A Settings → Elements → Panels → Padding

2. Locate:

   Padding Top (for dynamic header positioning)

3. Enter the height value you identified.

Example:

480px

4. Save your changes and refresh the page.

How This Works

Because the header overlays the content using absolute positioning, the page requires additional top padding to offset the header height.

This setting allows you to manually control that spacing on a per-page basis rather than relying on a single global value.

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

Need Help?

If you are unsure which value to use, or need assistance configuring your Composer 2 header settings, please contact the ASP Support Team.