{"product_id":"2026-06-14","title":"[Horizon] Auto-generate a same-level (sibling) navigation menu from your main menu","description":"\u003cp\u003e\u003cspan\u003eWhen your Shopify main menu is built out to a second or third level, moving between items on the same level still forces shoppers to reopen the menu every time — a small but real friction. This is how to make the Horizon theme automatically show a sub-menu that mirrors your main menu structure, so visitors can move across the same level with one tap.\u003c\/span\u003e\u003c\/p\u003e\n\u003ch3\u003eAuto-generate a same-level (sibling) navigation menu from your main menu — Horizon theme\u003c\/h3\u003e\n\u003cvideo controls=\"controls\" style=\"max-width: 100%; height: auto;\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/vp\/2378723a152f4ceb884f4b28f7908350\/2378723a152f4ceb884f4b28f7908350.HD-720p-1.6Mbps-86458381.mp4\" type=\"video\/mp4\"\u003e\nYour browser does not support our video.\n\u003c\/source\u003e\u003c\/video\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Result: sibling navigation menu\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-06-14_1_en.png?v=1781358727\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e[Setup] Add a Custom Liquid section to the header group and paste the code\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"Setup: add a Custom Liquid section to the header\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-06-14_2_en.png?v=1781358731\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eIn Horizon the header is a \"section group\". In the theme editor, open the \"Header\" area, choose \"Add section\" \u0026gt; \"Custom Liquid\", and paste the code included with your purchase. That alone renders a horizontal sub-menu of the current page's sibling links directly beneath the header on every page.\u003c\/p\u003e\n\u003cp\u003eThe code is almost identical to the Dawn version — the only real change is a single CSS selector. Because Horizon wraps each section in a div (.shopify-section) instead of a section element, section:has(...) is replaced with .shopify-section:has(...). This preserves the original trick of showing the sub-menu only on pages that have siblings and hiding it everywhere else.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eDawn theme version: \u003ca href=\"\/en-us\/products\/2023-06-01\"\u003eAuto-generate a same-level navigation menu from your main menu (Dawn)\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48973803094267,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-06-14.png?v=1781359143","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-06-14","provider":"STORE DOJO","version":"1.0","type":"link"}