Skip to content
L-107Layout

EtchWP Mega Menu Flat

Flat, editorial mega menu header, as a plain, fully editable Etch tree: header > container > optional utility row (availability, phone, brochures, sign in) > bar (brand, nav with Destinations, Journeys and Stays panels p…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

EtchWP Mega Menu Flat reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type
Layout
Category
Footers and headers
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 20

Set on the section, in Etch’s attributes panel. No code needed.

data-theme
papersandink

data-accent
primarysecondaryaccentneutral

accent token for numbers, underlines, kickers and the CTA hover

data-type
serifsans

editorial serif or sans headings in panels, brand and demo

data-position
staticstickyfixed

default static so it never overlaps other sections

data-utility
truefalse

top utility row with availability, phone and secondary links

data-align
startcenterend

desktop nav placement

data-trigger
hoverclick

how panels open on desktop (click and keyboard always work)

data-close-delay
numberdefault 70 / 240

ms · hover intent

data-reveal
curtainfadenone

curtain grows the band from the bar and adapts its height between panels

data-stagger
numberdefault 45

ms · delay between panel columns

data-duration
numberdefault 420

ms · and

data-easing
smoothspringsnappyeaselinear

or any cubic-bezier

data-rules
truefalse

hairlines between panel columns

data-feature
truefalse

feature column in panels

data-shadow
nonesoft

flat band or a soft shadow under it

data-radius
nonespill

CTA and chip corners

data-overlay
truefalse

dims the page below the band

data-cta
truefalse

and

data-scroll-lock
truefalse

for the phone sheet

data-demo
truefalse

demo hero below the bar for previews

Component props 2

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Flat Link41 in this pattern · 6 props
PropTypeDefault
label
text

Iceland

url
text

#

showTag
true / false

False

tag
text

New

showNote
true / false

False

note
text

Fire, ice and long summer light

Flat Feature3 in this pattern · 11 props
PropTypeDefault
showImage
true / false

True

image
text

https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=720

imageAlt
text

A quiet lantern-lit lane in Kyoto with a five-storey pagoda behind

ratio
text

portrait

showKicker
true / false

True

kicker
text

Journey of the month

title
text

Kyoto, slowly

showText
true / false

True

text
text

Twelve days of small inns, temple mornings and unhurried trains.

linkLabel
text

See the journey

url
text

#

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan