スマートフォンでご自身のShopifyストアを開き、コレクション一覧を見ようとして3本線のハンバーガーアイコンをタップしても、何も起きない。あるいはドロワーが一瞬だけ表示されてすぐ閉じてしまう、または大元のカテゴリーは出るのにサブメニューが展開しない。モバイルでナビゲーションを開けない場合、ストア内を見て回るのがかなり難しくなります。
- 3つの明確な障害原因： 「メニューが開かない」とは、CSSや破損したテーマのマークアップによってドロワーが隠れている、ホバー用ルールがタッチ画面と衝突している、または管理画面でサブメニューがネストされていない、のいずれかを指す場合があります。
- 安全第一の鉄則： コードに手を入れる前に必ずテーマを複製し、パソコンの画面縮小だけでなく実機のスマートフォンで挙動を確認してください。
- 保守性の現実： テーマファイルに直接書き込んだカスタムCSSは、テーマのバージョン更新時に上書きされやすいため、継続的な保守を避けたい場合は専用アプリが有力な選択肢になります。
Quick answer: why a Shopify mobile menu won’t open
Most Shopify mobile menus fail for one of three reasons: the drawer is hidden by CSS or broken theme markup, a hover-only dropdown fights with touch, or submenu links are not nested in Content > Menus. Duplicate your theme, check each cause in that order, and test on a real phone.
本ガイドはShopifyテーマ専用の解説です。WordPressやWixなどのメニューとは根本的な構造が異なります。以下のステップに従い、複製したバックアップテーマ上で順を追って原因を切り分け、本番ストアの稼働を保護しながら検証を進めてください。
Three different problems: menu won’t open, opens the wrong way, submenu won’t expand
マーチャントが「スマホのメニューが動かない」と相談される際、多くは以下の5つの症状のいずれかを指しています。設定やコードを変更する前に、該当する行を確認してください：
| 症状 | 考えられる原因 | 対処する箇所 |
|---|---|---|
| ハンバーガーアイコンをタップしても無反応 | CSSで非表示化されているかテーマ構造が破損 | 隠れたドロワーとテーマ構文を確認 |
| 開いてすぐ閉じる / タップ時にチラつく | ホバー用ドロップダウンがタッチ操作と衝突 | タップ起動へ変更 |
| サブメニュー項目が表示されない | コンテンツ > メニューで未ネストかテーマ仕様 | メニューのネストとテーマ設定を確認 |
| ドロワーが画面全体を覆ってしまう | テーマのドロワースタイルまたは幅設定 | ドロワーの幅とデザインを調整 |
| パソコンでは動くがスマホで動作しない | モバイルヘッダー設定が個別に定義されている | モバイルヘッダー設定 および ドロワー形式を確認 |
各症状はストアの異なる技術レイヤーに根ざしています。アイコンが無反応な場合はJavaScriptエラーやCSSによる非表示が原因のことがあり、点滅現象はマウス用に書かれたホバー指定がタッチ操作で想定外の挙動をすることが原因のことがあります。一部のテーマではモバイルヘッダーとデスクトップヘッダーが個別に設定できる点にご留意ください。
Before you edit code: duplicate your theme and test on a real phone
テーマコードやスタイルシートに手を加える前に、本番ストアを守るための2つの基本対策を実施してください。
第1に、現在のテーマを必ず複製してください。Shopify公式のテーマ複製手順ガイド にも次のように明記されています：”Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to.” Shopify管理画面の オンラインストア > テーマ から、現在有効なテーマの横にある3点リーダー（...）をクリックし、複製 を選択します。すべての検証はこの複製テーマ上で行います。
第2に、実機のスマートフォンでナビゲーションを操作してください。パソコンのブラウザ検証ツールによる画面幅シミュレーションは便利ですが、実機と同じではありません。Shopify公式も モバイル端末でのメニューテスト を推奨し、ドロップダウンが正しく展開するか実機で確かめることを促しています。実機であれば、デスクトップのエミュレーターでは見逃す可能性のあるタッチ操作の問題に気づける場合があります。
また、直近に追加したアプリや計測タグを一覧化しておきましょう。マーケティング用タグ、Googleタグマネージャー、SEOアプリなどはテーマにスクリプトを追加することがあり、ナビゲーションの動作に影響する可能性があります。コードを触る前に、まずテーマエディタを確認してください。多くのテーマではモバイルメニューの挙動はテーマエディタのヘッダーセクションで直接管理されています。
Hamburger icon does nothing: hidden drawer CSS and broken theme.liquid
ハンバーガーアイコンを押しても全く反応がない場合、ドロワー開閉イベントを止めるJavaScriptエラーが発生しているか、CSSによって開いたドロワーが画面外に押し出されている可能性があります。
Check the browser console and recent apps
まずはブラウザのデベロッパーコンソールでスクリプトエラーを確認します。スマートフォンをUSBデバッグでPCに接続するか、PCブラウザでストアを開きウィンドウ幅を狭めてデベロッパーツール（F12 キーまたは右クリック > 検証）を開きます。
Console タブを選択した状態でハンバーガーボタンをタップします。赤字のエラー表示（Uncaught TypeError や SyntaxError など）が出ていないか確認してください。スクリプトエラーでそのスクリプトの残りが実行されなくなると、テーマのメニュースクリプトが動かない可能性があります。最近導入したアプリが原因と思われる場合は、オンラインストア > テーマ > カスタマイズ > アプリの埋め込み で該当アプリを一時的にオフにして、メニューの反応が戻るかテストします。
Restore the top lines of theme.liquid
コンソール全体にスクリプト障害が出ている場合は、テーマの親テンプレートである layout/theme.liquid を点検します。このファイルにはテーマのスクリプトが前提とするページ最上位のHTML構造が含まれています。
Shopifyコミュニティの報告事例 では、Googleタグマネージャーのタグを追加している最中に theme.liquid の先頭2行が削除され、ストアのモバイルメニューが動かなくなったと報告されています。これは店舗オーナーが挙げた原因候補であり、公式に確認された解決策ではありませんが、ファイル先頭に欠けている行がないか確認する価値があることを示しています。オンラインストア > テーマ > … > コードを編集 から layout/theme.liquid を開き、先頭の数行を編集前の同じテーマのコピーと比較して、削除された部分がないか確認してください。
A CSS rule that forces the drawer visible (last resort)
JavaScriptは正常に状態を切り替えているものの、CSSルールによってドロワーが画面外に留め置かれたり非表示にされているケースもあります。
例えば、Dawnテーマに関する Shopifyコミュニティのディスカッション では、base.css に以下のメディアクエリを追加することでドロワーが再表示された例が報告されています：
/* Example reported in a Shopify Community thread for Dawn theme base.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
.menu-opening .menu-drawer {
transform: translate(0);
visibility: visible;
}
}
別のテーマを扱った事例では、main.css 内の開閉ルールに visibility: visible を追加して復旧した報告もあります（Shopifyコミュニティスレッド 389597）：
/* Example reported in a Shopify Community thread for main.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
.main-menu__disclosure.is-open > .main-menu__content {
opacity: 1;
visibility: visible;
}
さらに、.js details[open] > .menu-drawer のように開いたdetailsタグを対象にした記述が役に立ったという報告もあります（Shopifyコミュニティスレッド 395768）。
これらのCSSコードは特定テーマおよび特定バージョンでの個別事例であり、万能のパッチではありません。セレクタ名はテーマ構造によって大きく異なります。また、CSSで無理やり可視化しても根本的な構文エラーは解決しません。トラブルシューティング時は次の3つの診断キーワードを意識してください：visibility hidden、broken theme.liquid、check the browser console。
Figure 1: Concept illustration — Diagram of a Shopify mobile drawer hidden by CSS next to the same drawer made visible after checking markup and styles.
Hover dropdowns on touch screens: open on tap instead
スマホ上でメニューが一瞬開きかけて即座に閉じる場合や、タップ時にサブメニューが激しく点滅する場合は、デスクトップ用のホバー指定が原因であることがよくあります。
MDN Web Docsの仕様定義によると、メディアクエリ @media (hover: none) は「the primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap)」という環境を示します（MDNホバー仕様ドキュメント）。これに対して @media (hover: hover) は「the primary input mechanism can conveniently hover over elements」に適用されます。
カスタムCSSやPC向けのテーマスタイルが、端末の性質を確認せずにサブメニュー展開を :hover に紐付けていると、タッチ端末はホバーを擬似的に再現しようとすることがあります。その結果、タップした瞬間にドロップダウンが開いてすぐ閉じたり、ホバー用ルールの想定どおりに動かなかったりする場合があります。
この衝突を防ぐには、ホバー展開の指定をポインター操作が可能な端末のみに限定し、タップ起動へ切り替えます：
/* Restrict hover behavior to devices with true pointer hover capability */
/* Placeholder selectors for illustration only: replace them with your theme's own classes. */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (hover: hover) {
.header__menu-item:hover .header__submenu {
display: block;
}
}
ホバースタイルを @media (hover: hover) で囲むことで、スマホやタブレットではテーマ標準のタップ展開が使われます。タッチ向けヘッダーでホバー展開を実現するのは難しく、Dawnに関する Shopifyコミュニティの投稿 でも、CSSだけで実現する方法は見当たらないという趣旨の回答があります。JavaScriptが必要になるか、テーマの標準動作を維持するのが現実的でしょう。
Submenus that should expand: nesting, theme settings, and CSS
モバイルドロワー内に第1階層の項目は並ぶものの、下の階層が展開しない場合、原因の大半はメニュー階層の構成設定にあります。
まずShopify管理画面の コンテンツ > メニュー で階層を確認してください。Shopify公式ドロップダウンメニュー解説 にある通り、”You can build drop-down menus by creating or moving menu items so that they’re nested below a top-level item.” と記載されています。子項目はメニューエディターで親項目の下にネストする必要があり、ネストされていない項目は第1階層項目のままです。
またShopifyには階層制限が存在します：”The top-level item can have up to two levels of nested drop-down menus.” これにより最大で以下の3階層まで作成可能です：
- 第1階層（例：アパレル）
- 第1ネスト・サブメニュー階層（例：レディース）
- 第2ネスト・サブメニュー階層（例：ジャケット）
多くのテーマでは、子項目を持つ親項目をタップした際、ページ遷移ではなくリスト展開トグルとして機能します。もし親カテゴリーの一覧ページ自体にも遷移させたい場合は、サブメニューの最上部に「すべて見る（Shop all）」といった個別リンクを配置するのが実用的です。
管理画面のネストが正確であるにもかかわらずスマホで開かない場合、テーマ固有のスタイル調整が必要な場合があります。Shopifyも “some themes might require CSS adjustments to improve mobile usability.” と言及しています。CSSを記述する場合は、必ずモバイル用メディアクエリ（例：@media (max-width: 749px)）内に限定し、ドロワー関連のセレクタのみを対象にしてPC側のレイアウトに影響を与えないように注意してください。メニュー構成の全体像については Shopify menu guide もあわせてご参照ください。
Drawer opens full width or the wrong style
メニュー自体は開くものの、開き方が使い勝手を損なっているケースがあります。ナビゲーションパネルがスマホ画面全体を覆い、背後のストアが見えなくなってしまうと感じる運営者もいます。
運営者の間には、ドロワーが全画面を覆わない表示を好む声もあります（Shopifyコミュニティスレッド 275308）。ドロワーが端から端まで画面を埋めると背後のページが隠れます。暗くなったページの一部が見えていれば、パネルを閉じられることが伝わりやすくなります。
コードをいじる前にテーマ設定を確認してください。近年のテーマでは、モバイルメニューの挙動はテーマエディタのヘッダーセクションで設定できます。さらに一部のテーマでは、モバイル用とPC用のヘッダーを独立して管理できるものもあります。
お使いのテーマに幅設定が存在しない場合、複製したテストテーマ上で最大幅（max-width）を指定して検証できます：
/* Example max-width constraint for a slide-out drawer on a duplicate theme; the value is only a placeholder, pick one that suits your design */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
.menu-drawer {
max-width: 80vw;
}
}
スタイリングの際は次の3つの要点を維持してください：Drawer opens full width の抑制、外側タップで閉じられるよう overlay stays visible を保つこと、そして上部にわかりやすい easy close button を常時配置することです。ドロワーのデザインパターンについては mobile drawer menu best practices で詳しく解説しています。
Figure 2: Concept illustration — Side-by-side phone mockups of a full-width Shopify mobile drawer and a partial-width drawer with the page visible behind.
Trade-offs: when code fixes stop being worth it
CSSやLiquidファイルを直接書き換えてモバイルメニューを直す手法は応急処置として有効ですが、長期的な保守コストを慎重に判断する必要があります。
第1に、手作業で追加したコードはテーマ更新後に再適用が必要になることがよくあります。Dawnテーマに関する議論では、バージョン11.0へ更新するとメニューの不具合は解消したものの、カスタム変更を改めて追加し直す必要があると報告されています（Shopifyコミュニティスレッド 259424）。テーマを更新すると、base.css、main.css、theme.liquid などに追加した内容を再度適用しなければならない場合があります。
第2に、フォーラム等で共有されるコードはテーマごとの仕様に強く依存します。main.css の例のセレクタ（.main-menu__disclosure.is-open > .main-menu__content）とDawnの base.css の例のセレクタ（.menu-opening .menu-drawer）は全く別物です。他テーマ用のCSSをそのまま貼り付けても何も起きないか、予期せぬ表示崩れの原因になることがあります。修正を重ねるほど原因の切り分けも難しくなります。
ただし、何でもアプリに頼れば良いわけではありません。アプリ導入を避けるべき明確なケースもあります：
- 1行の構文欠落が原因の場合： タグやアプリの追加時に
theme.liquidの先頭行が削除されたことが原因なら、その行を復元するだけで余計な負荷なく解決できる場合があります。 - テーマに標準機能がある場合： ヘッダー設定内にドロワー幅やサブメニュー表示の選択肢が用意されているなら、純正設定を使うほうが簡単なことが多いです。
- 管理負担の増加： アプリを1つ増やすごとに、設定や日常的な管理の手間が追加されます。
Where Navi+ fits
テーマ純正のモバイルナビゲーションでは望むレイアウトが組めない場合や、テーマ更新のたびにCSSを再適用する運用から脱却したい場合、Navi+が有力な代替手段となります。
Navi+ Mobile Menuは、アプリ画面上ですべて直感的に完結できる専用ドロワーナビゲーションを提供します：
- ドロワー幅の調整： アプリの設定でモバイルドロワーの幅を指定できます（新規メニューの初期値は80%）。画面全体を覆わずに済みます。
- 選べるサブメニュー表示形式： サブ階層を、新しいパネルへ横スライドさせるか、その場でアコーディオン式に縦展開するかを選べます。
- 背景オーバーレイとスクロールロック： ドロワー表示中の背景の暗転とページのスクロール抑止を設定でき、メニューは最大3階層までのナビゲーションに対応します。
- 固定タブバー： ハンバーガーメニューを補完する形で、画面下部に常時表示のボトムタブバーを設置すれば、閲覧中も主要導線が見え続けます。
Navi+の役割を正しく理解していただくための注意点：Navi+は破損したテーマファイルを修復したり、テーマ自体のバグ付きドロワーをパッチ修正するものではありません。テーマ側のコードをいじることなく、独立した安定ナビゲーションへ置き換えるためのソリューションです。
If you’ve re-applied the same menu fix after every theme update, you can try building the mobile drawer in Navi+ instead — set the drawer width and submenu style in the app, preview it on your phone, and keep your theme files untouched.
カタログ構造に適したメニュー形式の選択基準については choose the right menu type および bottom tab bar on mobile の各ガイドをご活用ください。
Action checklist after the fix
複製テーマ上で修正を行った後は、本番反映前に以下の7項目のチェックリストを必ず実行してください：
- 双方向の開閉テスト： ハンバーガーアイコンをタップしてドロワーが瞬時に開き、閉じるボタン（
X）および暗転背景エリアのタップ双方でスムーズに閉じることを確認する。 - サブメニューの安定展開： 親項目をタップした際、画面のちらつきや誤遷移を起こさずに子リストが展開することを確認する。
- タップ領域の適合性： 各リンクやトグルボタンがWCAG 2.2 SC 2.5.8基準の最低24×24 CSSピクセル以上のターゲットサイズ（一部例外あり）を満たしているか確認する（W3Cターゲットサイズ基準）。
- 複数端末での実機検証： iOS（Safari）およびAndroid（Chrome）の双方の実機で操作感をチェックする。
- 変更コードの記録保管： 将来のテーマアップデートに備え、追加したCSSルールや変更箇所を確実にドキュメント化しておく。
- 常時表示ナビゲーションの検討： ニールセン・ノーマン・グループの研究にある通り、”the hamburger menu is not so universal that everyone knows it or immediately looks for it” であるため（NN/gモバイルナビゲーション調査）、navigation beyond the hamburger menu で取り上げた常時導線の併用を検討する。
- 検証済みテーマのみ公開： すべてのテスト項目をクリアした複製テーマのみを本番ストアへ公開する。
FAQ
Why won’t my Shopify hamburger menu open?
多くの場合、優先順位の高いCSSがドロワーを画面外に隠しているか、タグやスクリプトの追加時にtheme.liquid先頭の重要タグが誤って削除されたことが原因です。コード編集の前に開発者ツールのコンソールでJavaScriptエラーを確認し、直近追加したアプリを停止して確認してください。
How do I make a submenu open when I tap the parent item?
Shopify管理画面の コンテンツ > メニュー で、子項目を親項目の真下にドラッグして右へインデントさせてください。多くのテーマでは子を持つ親項目が展開トグルボタンになりますが、仕様変更にはテーマ設定やCSS調整が必要です。
How many submenu levels does Shopify support?
Shopifyのナビゲーションは、第1階層項目の下に最大2階層のサブメニューをネストでき、合計で最大3階層まで対応しています。ストアフロントで利用中のテーマ側も3階層表示のサポートが必要な場合があります。
Will my CSS fix disappear when I update my theme?
多くの場合はい。base.cssやmain.cssに直接記述したカスタムコードは、新しいテーマバージョンへ更新した際に再度追加が必要になることがよくあります。必ず複製テーマを作成し、変更したコードのメモを残しておいてください。
Why do hover menus misbehave on phones?
多くのタッチ端末は快適にホバーできません。MDNは、多くのモバイル端末がホバーを再現するのは不便な長押しのときだけだと説明しています。PC向けの:hoverルールがタップで反応すると、ドロップダウンが意図せず開閉することがあります。
Can I change the width of the mobile drawer?
お使いのテーマによっては、テーマエディタのヘッダーセクションでドロワー幅を直接調整できます。標準設定がない場合は、CSSメディアクエリでmax-widthを定義するか、幅調整機能を備えた専用メニューアプリを活用してください。
Sources
- Shopify Help Center: Drop-down menus (help.shopify.com)
- Shopify Help Center: Duplicating themes (help.shopify.com)
- MDN Web Docs: @media (hover) (developer.mozilla.org)
- W3C: WCAG 2.2 Target Size (Minimum) (w3.org)
- Nielsen Norman Group: Mobile Navigation Beyond the Hamburger (nngroup.com)
- fudge.ai: How to Change Mobile Menu Behavior in Shopify (fudge.ai)
- Shopify Community: Why isn’t my online store menu opening on mobile devices? (community.shopify.com)
- Shopify Community: Why is my menu not showing on mobile when I click the hamburger icon? (community.shopify.com)
- Shopify Community: Mobile menu is not working for my store (community.shopify.com)
- Shopify Community: Menu doesn’t work on mobile (community.shopify.com)
- Shopify Community: Why is the mobile menu not functioning on Dawn theme? (community.shopify.com)
- Shopify Community: How to fix a menu opening fully on mobile? (community.shopify.com)
- Shopify Community: Dawn theme header expand without clicking (community.shopify.com)
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。