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:
Navigate to:
D&A Settings → Elements → Panels → Padding
Locate the field:
Padding Top (for dynamic header positioning)
- Enter a custom value such as:
100px120px132px
- Save and refresh the page.
- 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
- Right-click anywhere on the Page Title Hero section.
- Select Inspect from the menu.
This will open your browser’s developer tools.
Step 3: Select the Hero Container
Inside the developer tools:
- Move your mouse over the highlighted HTML elements.
- 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:
480pxStep 4: Apply the Height Value
Navigate back to:
D&A Settings → Elements → Panels → Padding
Locate:
Padding Top (for dynamic header positioning)
- Enter the height value you identified.
Example:
480px- 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.
Comments
0 comments
Please sign in to leave a comment.