[Horizon] How to turn the header menu into a Dawn-style "dropdown"

Horizon's desktop menu only comes as a mega menu, so you can't pick a Dawn-style "dropdown" that opens a small list of child links right under the parent item. This tip adds a new block based on the header menu block and replaces only the desktop display with a dropdown. The mobile drawer menu stays as Horizon's default.

👉 See it live on the demo store below (on desktop, hover over the parent menu "商品一覧" to open the child and grandchild links right below it).
horizon-store-q9zl2koe.myshopify.com
Store password: store-dojo

Result

Hover over a parent item and its child and grandchild links open right below it. When the menu opens on hover, clicking the parent item takes you to its link (keyboard and tap only open and close the menu).

When the parent items don't fit the screen width, the ones that don't fit move into "さらに表示する" (More). Inside it, parent, child and grandchild links are listed with indents, and the grandchild display setting still applies.

Switch the open behavior, grandchild display and styling in the settings

◆Dropdown
・How parent menus open (desktop): on hover / on click
・Grandchild links (desktop): always expanded / expand on click (click the child link or the chevron next to it)
・Tap to expand grandchild links (mobile): turn off to show grandchild links expanded on mobile too

◆Dropdown styling (desktop)
・Parent items: font size, weight, letter spacing, gap between items, text color, chevron, hover style (underline / change text color / none)
・Panel: minimum width, vertical padding, gap from the header, corner radius, shadow, border, background color, text color, open animation (fade / slide / none)
・Child links: font size, weight, vertical and horizontal padding, hover background color
・Grandchild links: font size, indent, text opacity

If you leave the color settings empty, the header's color scheme is used.

[Settings] Configure in the theme editor

After setup, select "Menu (dropdown)" inside "Header (dropdown menu)" in the theme editor's left sidebar. The dropdown settings appear in the right panel.

[Setup] Add 3 files in the code editor and edit header-group.json

Go to Online Store > Themes > "..." > Edit code and follow the steps below. The theme's own files (header.liquid and _header-menu.liquid) are not changed.

◆① blocks/_header-menu-dropdown.liquid (new)
・In the blocks folder, choose "Add a new block" and paste the code from the purchase bonus
・This block is a copy of _header-menu.liquid with the desktop part (L66-L284) replaced by a dropdown. The mobile drawer and navigation bar parts are unchanged

◆② sections/custom-header.liquid (new)
・In the sections folder, choose "Add a new section", then copy the whole content of header.liquid and paste it
・On L88, L92 and L96, change the block name '_header-menu' to '_header-menu-dropdown'
・Changing the schema "name" to something like "Header (dropdown menu)" makes it easier to find in the theme editor

◆③ snippets/dropdown-menu-style-vars.liquid (new)
・In the snippets folder, choose "Add a new snippet" and paste the code from the purchase bonus. This snippet turns the styling settings into CSS variables

◆④ sections/header-group.json (edit)
・Under "header_section", change "type": "header" to "custom-header"
・Inside it, change "header-menu" "type": "_header-menu" to "_header-menu-dropdown" and save

Tested on Horizon 4.3.0. Line numbers are based on header.liquid and _header-menu.liquid in Horizon 4.3.0.

For how the "media type" setting changes Horizon's desktop submenus, see: Submenu display by the desktop menu "media type" setting