Sticky Header

Sticky Header

Theme Options Sticky Header

Sticky header is the header displayed when the visitor scrolls down the page, when the static header scrolls out of the visible part of the screen.

How to enable/disable sticky header

The sticky header can be completely disabled. Steps:

  1. Go to WP admin -> Loyde -> Theme Options -> Header -> Sticky Header
  2. Under Enable Sticky Header select "Off".

How to enable/disable the hiding effect

By default, sticky header is not constantly visible:

  • sticky header hides when scrolling downwards
  • sticky header is displayed when scrolled upwards

This behavior is unobtrusive for the visitor, and the sticky header appears only "when needed" (when the visitor starts scrolling upwards, perhaps looking for the main menu).

However, the hiding effect can be disabled:

  1. Go to WP admin -> Loyde -> Theme Options -> Header -> Sticky Header
  2. Under UX Enhancements (Effects) -> Hide Sticky Header When Scrolling Down (and Show on Scroll Up) select value "Off".

How to build sticky menu using WPBakery Page Builder

Loyde offers possibility to build completely custom sticky headers, using the page builder. Internally, this feature is built upon the Layout Blocks custom post type. More info about layout blocks can be found here.

Steps:

  1. Create a new layout block, or edit an existing one. Save the changes.
  2. Go to WP admin -> Loyde -> Theme Options -> Header -> Sticky Header
  3. Select a layout block for the desired screen size (large desktop, small desktop, tablet, mobile).

Pre-built "header" layout blocks found in demo

Theme demo ships with a number of "header" layout blocks. They are found under WP admin -> Layout Blocks, grouped as:

  1. Header
  2. Header One Row
  3. Header Two Rows
  4. Header Three Rows
  5. Header with Full Height Logo
  6. Header with Overlapping Bars

Fallback: Default header

Building custom sticky headers (using page builder) is completely optional. If no custom sticky header is selected for any of the screen sizes, Loyde will display the default sticky header. The default sticky header is actually the default header, but with displayed "sticky logo" instead of "primary logo" (if stcky logo has been selected). More info here.

Overriding the default sticky header

It's possible to edit the default sticky header. But, it includes overriding the corresponding theme PHP template.

The steps are identical as described here (because the default sticky actually is the regular header, only with optionally replaced logo).