Skip to main content

Header Actions

Nectar Header Actions Block Icon

The Header Actions block groups the interactive icons in your header — typically Search, a Header Account link and a WooCommerce Mini Cart — into a single, evenly aligned row. It gives you one place to control the size, spacing and color of all those icons at once.

Header Actions​

  • Icon Size The size of every icon in the container (16–40px).
  • Gap The horizontal spacing between action items (0–60px).
  • Icon Color The color applied to all icons, with a hover state. Because headers can change appearance as the page scrolls, the color can also be set per header state (for example a different color when the header is transparent versus scrolled).
Nectar Header Actions Settings

Child blocks​

Header Actions is a container. Add the actions you need inside it:

  • Search — a popup or inline site search.
  • Header Account — a single icon linking to the user's account page (see below).
  • WooCommerce Mini Cart — the cart icon and dropdown (when WooCommerce is active).

Header Account​

The Header Account block renders an account icon link inside Header Actions. Its settings are:

  • Icon Choose the account icon style: Classic, Minimal or Bold.
  • Link Set where the icon points. If left empty it defaults to the WooCommerce My Account page; you can also open it in a new tab and add custom attributes.

The account icon inherits its size and color from the parent Header Actions block, so everything in the row stays visually consistent.

How it works​

On the front end the block lays its children out in a horizontal flex row using the gap you set, and cascades the icon size and color down to each child (search icon, account icon, cart icon). Per-state colors let the icons adapt as the header transitions between transparent, scrolled and overlay-menu-open states.