/* * Header mega menu. * * Two presentations of one DOM. On a pointer screen the categories are a tab * strip in the bar and the panels drop below it full width; below 900px the * same markup becomes a drawer whose panels slide in as a second level with a * back button. Sharing the markup keeps one source of truth for the links and * means the product pictures are never downloaded twice. * * The panel strip is measured and animated in JavaScript (height), so nothing * here sets a fixed panel height. */ .mega, .mega *, .mega *::before, .mega *::after, .mega__overlay { box-sizing: border-box; } .mega { flex-grow: 1; min-width: 0; } /* * WordPress's core/shortcode block runs its raw content through wpautop() * before expanding the shortcode (render_block_core_shortcode() literally * returns wpautop( $content )), and since the saved block content is just * the bare tag `[ecoflow_mega_menu]` with no block-level markup around it, * wpautop wraps it as `

[ecoflow_mega_menu]

` first. Once do_shortcode() * then expands that tag into this nav's markup, the browser's own HTML * parser auto-closes the `

` the moment it hits the block-level `