Kadence Tutorial: Creating Sticky & Transparent Headers

In modern website design, stickyfooterand transparent headers are often used to enhance visual effects and operational fluency. The use of Kadence in the themeAdvanced Headerfunction, you can flexibly implement these two styles, or use them in combination to achieve rich page design.

Add Advanced Header Module

First, add the Header (Adv) block to the page. You will be prompted to create a new header, or choose from an existing template.Kadence A variety of preset templates are provided, including:

• Single or multi-line desktop header
• Header layout optimized for mobile

After selecting a template, you can use the visual editor to add content modules and freely arrange the sections.

Setting a transparent header

Transparent headers are often used in designs with large images or background content at the top of the page to give the page a more hierarchical look.

The setup procedure is as follows:

• Check the Header (Adv) block
• Go to the General option in the Settings column on the right.
• Enable Transparent Header

The Auto Spacing Under setting appears when enabled and is used to automatically add spacing at the top of the first container on the page to avoid content being obscured.

Also, the following style options are added to the Header and Navigation blocks:

• Transparent background and border settings

• Navigation menu transparent style and link style

These styles can be fine-tuned according to the page's color scheme and typographic needs.

Setting up sticky headers

Sticky header stays at the top of the page as it scrolls for easy accessnavigatoror operation portal.

Enable as follows:

• Check the Header (Adv) block
• Enable Sticky Header in General Settings

The following can be configured after activation:

• Sticky Section: select the area to be fixed (whole line, top, middle or bottom)

• Reveal On Scroll Up: show when page scrolls up, hide when page scrolls down

• Shrink Middle Row: Shrink the middle row in sticky state and set the height of the shrink.

Corresponding sticky style settings also appear in the Header and Navigation modules, including options for background color, border, and text color.

Enable both sticky and transparent headers

To use both transparent and sticky effects, simply turn on both options in the General settings of the Header (Adv).

After that, go to Style Settings and expand Sticky Background Settings to customize the background color and transparency of the sticky state.

This combination is suitable for the top area of a visually demanding page, such as displaying a large image, a brand slogan or a homepage banner.

Set sticky header to transparent or translucent

You can make the header in sticky state transparent or semi-transparent style even if transparent header is not enabled.

Simply go to Style Settings in the Header (Adv), turn on Sticky Background Settings, and use the color picker to adjust the transparency value to the desired visual effect.

Setting up a semi-transparent transparent header

If transparency is not desiredfooterFully transparent, or you can set it to a semi-transparent style with a slight background color. Expand Transparent Background in the Style settings and use the color picker to adjust the color opacity for a softer visual representation of the header.

wrap-up

Kadence Provides advanced header features that support the independent use and combination of sticky and transparent styles, adapting to a variety of page design needs. Combined with custom style control, you can create a practical and beautiful header area to improve the overall page quality.

For further customization of the style, combine the Kadence Blocks Achieve more detailed typography.