A sticky header stays visible at the top of the screen as visitors scroll down the page. In Avada, the sticky header is built into the theme options and takes about two minutes to configure – no plugin or custom code needed.
Step 1: Open the Avada Theme Options
Go to Avada -> Theme Options -> Header -> Sticky Header. This is where all sticky header behaviour is controlled. If you are using Avada’s Header Builder (Studio layouts), the sticky setting is on the Header Builder container itself – click the container and look for the Sticky Header option in the element panel.
Step 2: Enable Sticky Header
Set “Sticky Header” to On. The header will now stay fixed at the top of the viewport as visitors scroll. At this point it works but uses the same appearance as your standard header – the same height, colors, and logo size.
Need help with your WordPress site? Describe your project and get a free estimate.
Step 3: Configure the Shrink Effect
Avada’s sticky header supports a shrink effect where the header becomes shorter as the visitor scrolls past a threshold. In the Sticky Header settings, configure:
- Sticky Header Shrink – enables the height reduction on scroll
- Sticky Header Height – the height of the sticky header after shrinking (in pixels). 60-80px is a common range.
- Sticky Header Offset – how many pixels the visitor needs to scroll before the sticky header appears
- Logo Width for Sticky Header – set a smaller logo width for the shrunken state so the logo scales down with the header
Step 4: Set the Sticky Header Background Color
The sticky header background defaults to your theme’s primary background color. If your main header has a transparent background (common on hero sections), the sticky header needs a solid color so the navigation remains readable as it overlays content below. Set Sticky Header Background Color to a solid color – typically white, dark navy, or your brand’s primary color depending on your design.
You can also set the sticky header’s menu link color separately from the main header. If your main header has white links (for a dark hero background) and your sticky header has a white background, set the sticky menu link color to dark to remain readable.
Step 5: Test on Mobile
Sticky headers on mobile consume vertical screen real estate. A 90px sticky header on a 667px iPhone screen takes 13% of the visible area permanently. Test your sticky header on a real mobile device and consider reducing the sticky height specifically for mobile. In Avada’s responsive options, you can set different sticky header heights per device breakpoint.
If the sticky header causes issues with anchor links jumping to the wrong position (the linked section appears behind the sticky header), add a CSS offset to account for the header height:
:target {
scroll-margin-top: 80px; /* match your sticky header height */
}