[mokadesign]

【お使いの Snow Monkey のバージョン】バージョン: 29.1.6
【お使いの Snow Monkey Blocks のバージョン】バージョン 24.1.6
【お使いの Snow Monkey Editor のバージョン】バージョン 11.0.3
【お使いのブラウザ】Chrome
【当該サイトのURL】https://nokanoka.jp/

### 実現したいこと

PCサイズ（641px以上）でも「ドロワーナビゲーション（モバイル用）」をハンバーガーボタンで開けるようにしたいです。

スマホでは正常にドロワーメニューが動作していますが、タブレット・PCサイズではハンバーガーボタン自体が非表示になってしまいます。

参考サイト

コーノコーラ｜自然素材のクラフトコーラ

名古屋発、自然由来の素材で作る無添加クラフトコーラとスパイスカレーを販売しています。原材料に約10種類のスパイスと生薬を加えることで、「朝の一口で元気チャージ、…

conocola.com

のように、PCでも右上に「MENU」があり、クリックすると全画面でメニューを開くような構成を希望しています。

### 発生している問題

HTMLには <nav id="drawer-nav" class="c-drawer ..."> が出力されており、Snow Monkey のドロワー自体は存在しています。
しかし PCサイズでは #hamburger-btn が表示されず、クリックできないためドロワーが開けません。
CSSで強制的に display:flex !important; を指定しても表示されません。

### 試したこと

外観 → メニュー で「ドロワーナビゲーション（モバイル用）」にメニューを割り当て済み
以下のCSSを追加しましたが、PCサイズでは表示されませんでした：

@media (min-width: 641px) {
  #hamburger-btn {
    display: inline-flex !important;
  }
}

質問
PC幅でもドロワーメニューを有効にする正式な方法（もしくは推奨されるやり方）はありますか？

CSSだけで対応可能か、PHPなどテーマファイルの編集が必要でしょうか？

 

よろしくお願いいたします<(_ _)&gt

♥ 0

Who liked: No user

[まーちゅう]

こんにちは。
CSSで対応するとしたらこんな感じでしょうか。

.l-1row-header .u-invisible-lg-up {
display: block !important;
}

♥ 0

Who liked: No user

[mokadesign]

まーちゅう様

出来ました！ありがとうございます！

♥ 1

Who liked:

[キタジマ タカシ]

PC 用のグローバルナビゲーションの表示が不要（つまり、グローバルメニューは常にハンバーガーボタンとして表示したい）場合は、ヘッダーのレイアウトを「シンプル」にすれば良いです。

今回のように PC 用のグローバルナビゲーションも表示しつつ、ハンバーガーボタンも表示したいという場合は、まーちゅうさんが書いてくれたように CSS で何とかするか、ハッシュナビ機能を使う方法もあります。

特殊なリンク（ハッシュナビ機能）

Snow Monkey には、普通にリンクするのではなく、特定のコンポーネントを開くための特殊なリンクがありま…

snow-monkey.2inc.org

#sm-drawer というリンク先を設定したリンクをクリックすると、ドロワーナビゲーション（メニューを設定しておく必要があります）が開閉します。

解決済みの場合は、トピックのクローズをお願いします！

♥ 1

Who liked:

[mokadesign]

キタジマ タカシ様

ハッシュナビ機能で、お客様がご希望していたメニューに実装できました！！

こんな形です↓　解決できたのでトピックを閉めますね！ありがとうございました！

♥ 2

Who liked:

[投稿者]

投稿