Changelog

v1.3 - June 18th, 2026

Changes

1. added overlay mode for the header. Docs here.

2. added ability to offset the hero section of a page to leave room for overlay headers

3. added the ability for a header to be overlay and sticky at the same time

4. added stripe like dropdown animation using the 'desktop dropdown animation mode' prop on the menu wrapper component set to 'morph'

5. added the ability to set the a 'menu link' component to open in a new tab

6. reorganized component properties to utilize groups and conditions

7. upgraded the css comments in the 'header wrapper' css to use the etch comment navigation

8. Upgraded the dropdowns to use safety triangle logic for moving between the dropdown triggers and the content instead of just time outs. this means you can move slowly from the trigger and the content and it will keep the content open. see X post about this

Upgrade v1.2 -> v1.3

1. import the new header.json into a local install or blank install

2. turn on 'overwrite on paste' in the etch settings on your active install

3. from the blank install, copy and paste the 'menu wrapper', 'menu link', and 'menu dropdown' components and paste them into your active install anywhere. Click save, then delete the components you just pasted in. this should update those components props and internal code.

4. add these attributes to the 'header wrapper' element data-overlay-header="false" data-overlay-header-offset="false"

5. Copy the new overlay and sticky header css from your blank install on the 'header wrapper' component and replace the current' data-sticky-header' code with what should look like this.

&[data-overlay-header='true'],
  &[data-sticky-header='true'] {
    inset-block-start: var(--wp-admin--admin-bar--height, 0px);
  }

  &[data-overlay-header='true'] {
    position: absolute;
  }

  &[data-sticky-header='true'] {
    position: sticky;
  }

  &[data-sticky-header='true'][data-overlay-header='true'] {
    position: fixed;
  }

  &[data-overlay-header='true'][data-overlay-header-offset='true'] + main > :first-child > :first-child {
    margin-block-start: var(--header-height);
  }

1. turn off 'overwrite on paste' in the etch settings on your active install

---

v1.2 - March 17th, 2026

Changes

1. updated the header wrapper JS to close any open dropdowns when the user scrolls down when the header is in sticky mode.

2. added two new dropdowns: dropdown perseus and dropdown vega

Upgrade v1.1.1 -> v1.2

1. import the new header.json into a local install or blank install

2. copy the javascript from the header wrapper in the blank install

3. paste the javascript into your header wrapper javascript area inside of etch

---

v1.1.1 - February 20th, 2026

Changes

1. Resolved an issue where --dropdown-border-color was referrencing itself

2. Added new dropdown link variables to quickly change some styling for links inside a standard dropdown

3. Resolved an issue where --link-font-weight wasnt being used

4. Fixed an issue where dropdowns were using an old --dropdown-border variable which has recently been split into --dropdown-border-width and --dropdown-border-color

Upgrade Video - v1.1 -> v1.1.1

Video: https://magnified-web.neetorecord.com/watch/078ee495d144c0064511

---

v1.1 - February 16th, 2026

Changes

1. Moved the custom CSS from the 'Menu Wrapper' -> 'Header Wrapper'. this accomplishes a few things.

   1. makes it easier if the menu wrapper needs a component change the new version can just be dropped in (assuming no changes were made on on the sites instance)

   2. allows for all custom css to be found at a higher level instead of needing to edit the menu wrapper to see it

2. Added some combo selector css to free up some additional lines

---

v1.0.3 - February 10th, 2026

Changes

1. did a pass for all the dropdown patterns so that they don't use --radius-s because ACSS does not have these on by default.

2. Tightened up spacing on mobile for dropdown's so they werent so all over the place

3. While doing a pass I found a better way to apply padding for more compatibility. Padding for dropdown content has been moved from the .menu-dropdown__content-wrapper -> .menu-dropdown__content. This was moved to make it easier to use overflow: hidden; on the content like in dropdown Lyra

---

V1.0.2 - February 10th, 2026

Changes

1. Added the ability to target links within the nav that are are linked to the current page the visitor is on.

   1. Current active link gets a class of .active-link

   2. --link-color-active and --link-bg-active to change the color and background of the active links. You can also search for these variables inside the menu wrapper component to find where to add additional styling

2. Refined Dropdowns

   1. broke --dropdown-border into

      1. --dropdown-border-width

      2. --dropdown-border-color

   2. added --dropdown-link-min-radius so that the links inside standard dropdowns have a minimum radius before they abide by a concentric radius from the dropdown content

   3. added better alignment for nested dropdowns

      
3. ACSS V4 added padding to the header by default. Added CSS to remove that

4. Removed more found duplicate CSS

5. set .nav__list to have align-items: center; by default to resolve nav items falling out of alignment

---

V1.0.1 - February 5th, 2026

Changes

1. Fixed backdrop animation for off canvas mobile menu. Was instantly disappearing on close

2. Updated accordion mode logic so when you open a dropdown in accordion mode it will make sure it stays in view

3. Updated logic so that if menu is open on mobile and user resizes to desktop mode, the mobile menu closes

4. Removed some duplicate CSS

5. Renamed Etch Layer 'Header' -> 'Header Wrapper'

6. Renamed Etch Layer 'Header Inner' -> 'Header'

---

V1 Release - Feb 4th, 2026