{"product_id":"2026-10-26","title":"[Horizon] How to turn the header menu into a Dawn-style \"dropdown\"","description":"\u003cp\u003eHorizon'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.\u003c\/p\u003e\n\u003cp\u003e👉 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).\u003cbr\u003e\u003ca href=\"https:\/\/horizon-store-q9zl2koe.myshopify.com\/?preview_theme_id=138947461328\" target=\"_blank\" rel=\"noopener\"\u003ehorizon-store-q9zl2koe.myshopify.com\u003c\/a\u003e\u003cbr\u003eStore password: store-dojo\u003c\/p\u003e\n\u003ch3\u003eResult\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Result: dropdown on desktop, drawer on mobile\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_1_en.png?v=1792884605\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003eHover 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).\u003c\/p\u003e\n\u003cp\u003eWhen 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.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003eSwitch the open behavior, grandchild display and styling in the settings\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Switch open behavior, grandchild display and styling\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_2_en.png?v=1792884616\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆Dropdown\u003cbr\u003e・How parent menus open (desktop): on hover \/ on click\u003cbr\u003e・Grandchild links (desktop): always expanded \/ expand on click (click the child link or the chevron next to it)\u003cbr\u003e・Tap to expand grandchild links (mobile): turn off to show grandchild links expanded on mobile too\u003c\/p\u003e\n\u003cp\u003e◆Dropdown styling (desktop)\u003cbr\u003e・Parent items: font size, weight, letter spacing, gap between items, text color, chevron, hover style (underline \/ change text color \/ none)\u003cbr\u003e・Panel: minimum width, vertical padding, gap from the header, corner radius, shadow, border, background color, text color, open animation (fade \/ slide \/ none)\u003cbr\u003e・Child links: font size, weight, vertical and horizontal padding, hover background color\u003cbr\u003e・Grandchild links: font size, indent, text opacity\u003c\/p\u003e\n\u003cp\u003eIf you leave the color settings empty, the header's color scheme is used.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e[Settings] Configure in the theme editor\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Settings: dropdown options in the theme editor\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_3_en.png?v=1792884630\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003eAfter setup, select \"Menu (dropdown)\" inside \"Header (dropdown menu)\" in the theme editor's left sidebar. The dropdown settings appear in the right panel.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e[Setup] Add 3 files in the code editor and edit header-group.json\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Setup: add 3 files and edit header-group.json\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_4_en.png?v=1792884641\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003eGo to Online Store \u0026gt; Themes \u0026gt; \"...\" \u0026gt; Edit code and follow the steps below. The theme's own files (header.liquid and _header-menu.liquid) are not changed.\u003c\/p\u003e\n\u003cp\u003e◆① blocks\/_header-menu-dropdown.liquid (new)\u003cbr\u003e・In the blocks folder, choose \"Add a new block\" and paste the code from the purchase bonus\u003cbr\u003e・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\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"blocks\/_header-menu-dropdown.liquid (desktop markup)\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_8_en.png?v=1792985080\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"blocks\/_header-menu-dropdown.liquid (JavaScript)\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_9_en.png?v=1792985639\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆② sections\/custom-header.liquid (new)\u003cbr\u003e・In the sections folder, choose \"Add a new section\", then copy the whole content of header.liquid and paste it\u003cbr\u003e・On L88, L92 and L96, change the block name '_header-menu' to '_header-menu-dropdown'\u003cbr\u003e・Changing the schema \"name\" to something like \"Header (dropdown menu)\" makes it easier to find in the theme editor\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"sections\/custom-header.liquid\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_5_en.png?v=1792884652\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆③ snippets\/dropdown-menu-style-vars.liquid (new)\u003cbr\u003e・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\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"snippets\/dropdown-menu-style-vars.liquid\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_7_en.png?v=1792884673\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆④ sections\/header-group.json (edit)\u003cbr\u003e・Under \"header_section\", change \"type\": \"header\" to \"custom-header\"\u003cbr\u003e・Inside it, change \"header-menu\" \"type\": \"_header-menu\" to \"_header-menu-dropdown\" and save\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"sections\/header-group.json\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26_6_en.png?v=1792884663\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003eTested on Horizon 4.3.0. Line numbers are based on header.liquid and _header-menu.liquid in Horizon 4.3.0.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eFor how the \"media type\" setting changes Horizon's desktop submenus, see: \u003ca href=\"\/en-us\/products\/2026-03-14\"\u003eSubmenu display by the desktop menu \"media type\" setting\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":68385948172539,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-26.png?v=1792884707","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-10-26","provider":"STORE DOJO","version":"1.0","type":"link"}