[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).
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 (chevron button next to the child link)
・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-L188) 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
