Skip to main content

Header

The Zaya theme uses multiple header template parts that work together to create a flexible and responsive navigation system. Below you'll find how you can edit each part of the header.

header template parts

info

Starting from version 1.1.0, the header is split into three separate template parts. In earlier versions, it was combined in a single template part called Header.

Main Header​

The Main Header includes your site title or logo, the primary navigation, dark light toggle, search box toggle, and the hamburger icon that opens the mobile menu.

main header

Make the Header Sticky​

  1. Open Appearance > Editor > Patterns > All template parts and choose Header.
  2. Select the Site Header group block (the wrapper).
  3. In the right sidebar settings, you’ll see a Sticky Header toggle.
  4. Switch it on to make your header sticky.
  5. Save your changes.

enable sticky header

The Header Search template part is split into two columns. On the left you’ll find an image placeholder you can replace with your own banner, text "Stay Connected" that you can change freely, and the custom Social Media block where you can add your own links and icons. On the right, you’ll see a search block and a Categories List block that automatically displays your post categories.

header search offcanvas

  1. Go to Appearance > Editor > Patterns > All template parts and then select Header Search.
  2. To replace the image: click the image placeholder block then click Replace to upload or choose an image from the Media Library.
  3. Edit the “Stay Connected” text if you want a different heading.
  4. To update social links: click the Social Media custom block and edit the URLs or icon settings in the block controls.
  5. To change search or categories settings: click the Search block or the Categories List block and use the right sidebar to adjust available options.

Offcanvas Header​

Mobile navigation designed to appear when a user taps the hamburger icon in the Main Header

Edit Offcanvas Header - step by step​

  1. Go to Appearance > Editor > Patterns > All template parts and then select Offcanvas Header.
  2. Click into the Navigation block inside the offcanvas template part.
  3. In the block toolbar choose the same menu that you use in the Main Header navigation. Using the same menu keeps navigation consistent across desktop and mobile.
  4. Make any additional layout edits you want to the offcanvas area.
  5. Click Save.
info

The offcanvas is triggered by the hamburger icon in the Main Header. If you do not see the hamburger on your front end, verify that the Main Header still contains the hamburger icon block or pattern.