[ 解決済 ] 固定ヘッダーのレスポンシブのブレイクポイントの変更について
[ 解決済 ] 固定ヘッダーのレスポンシブのブレイクポイントの変更について
- このトピックには2件の返信、2人の参加者があり、最後に
により1ヶ月、 1週前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.6.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.26.5■ Pro Unit のバージョン
1.87.0.0■ スキンの種類
Evergreen■ スキンのバージョン
0.2.5■ 期待する動作
パターンライブラリの「観光地_着物レンタル（旧JPNSTYLEスキン風）」の固定ヘッダーを利用させて頂いております。
オーバーレイメニューでモバイルを指定し、画面が小さい時はハンバーガーメニューに切り替わるようにしています。
この切り替わりですが、スマホのサイズになるとハンバーガーになりますが、
もう少し大きいサイズ、例えばスマホを横にしたようなサイズやタブレットを縦にしたようなサイズの場合、ハンバーガーにならず、メニューが２行に折れてしまいます。
この場合であっても、ハンバーガーになることを期待しています。■ 自分で試した事
通常メニューからハンバーガーに切り替えるためのCSSを探しましたが、どこにあるかわからなく質問させて頂きました。■ 症状が発生するブラウザ
EDGE、CHROME■ 実際の症状
この切り替わりですが、スマホのサイズにならないとハンバーガーになりません。
そのため、スマホを横にした場合やパソコンで画面を小さくした場合（スマホを横にしたぐらいのサイズ）、ハンバーガーにならないため、メニューが改行され２行になったりします。※画像の添付について
①パソコンでの通常表示の画像
②パソコンでの縮小表示でメニューが２行になった場合の画像
③スマホサイズでの通常表示の画像■ その他特記事項
これを避けるため、ハンバーガーに切り替わるブレイクポイントを大きくしたいのですが、CSSの操作などでできるでしょうか？
お手数ですが、アドバイスを頂けると助かります。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
お世話になっております、VK パターンライブラリのご利用ありがとうございます。
ご質問いただきました件につきまして、VK Blocks の「非表示設定」機能で画面サイズごとに出しわけして解決できます。
- まず、「ナビゲーション」ブロックを複製して、複製した「ナビゲーション」の設定画面の「オーバーレイメニュー」を「常時」にします。（添付画像1枚目参照）
- 「ナビゲーション」の設定画面の下の方にある「非表示設定」を展開して、非表示にしたい画面サイズをオンにします（添付画像2枚目参照）
- 元々あった「ナビゲーション」の方も「非表示設定」を展開して、非表示にしたい画面サイズをオンにします（添付画像3枚目参照）
非表示設定の画面サイズはお好みでご変更ください。
以上で、ご希望の形になると思いますがいかがでしょうかうなこ様
渡井と申します。
素早い回答ありがとうございました。
頂いたアドバイスで解決しました。
１点だけ、追加した作業がありますので報告します。
コピー元の「ナビゲーション」ブロックのオーバーレイ設定を「オフ」にしました。
必要ないかもしれませんんが、念のために設定しました。
アドバイスありがとうございました。
本当に助かりました。
今後ともよろしくお願い致します。
- このトピックに返信するにはログインが必要です。
