[ 質問者返信待ち ] PC画面でのハンバーガーメニュー表示のずれについて
[ 質問者返信待ち ] PC画面でのハンバーガーメニュー表示のずれについて
- このトピックには4件の返信、3人の参加者があり、最後に
により2週、 6日前に更新されました。
-
投稿
-
■ WordPress のバージョン
WordPress 6.9.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning Pro■ テーマのバージョン
8.24.0■ スキンの種類
Origin II■ 期待する動作
PC画面にもモバイルと同じハンバーガーメニューを表示させたい。メニュー項目が多いため通常のヘッダーメニュー＋ハンバーガーメニューの双方を表示させたい。
添付の期待するイメージのような、できれば枠に囲まれず背景色もない、シンプルな３本線のハンバーガーメニューをヘッダーメニューの隣に表示させたい。■ 自分で試した事
過去のフォーラムから、モバイルと同じないようであれば
@media (min-width: 992px) {
body.device-pc .vk-mobile-nav-menu-btn,
body.device-pc .vk-mobile-nav {
display: block;
}
でPCにハンバーガーメニューを表示できることがわかりました。しかし表示させたところ、通常のヘッダーメニューとずれており、またハンバーガーメニューが右上端に寄ってしまっているため視認性が悪い状態です。
ヘッダーの位置調整の技術がなく、ここからどうしたらよいかわからないです。■ 症状が発生するブラウザ
クローム■ 実際の症状
通常のヘッダーメニューとずれており、またハンバーガーメニューが右上端に寄ってしまっているため視認性が悪い状態です。
よろしくお願いいたします。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
ありがとうございます。
追加CSSに位置指定を入れたところ、TOPページの希望位置に調整することができましたが、
画面スクロールを行うと、画像のようにヘッダーと分離してしまいます。希望は、ヘッダーの中にハンバーガーメニューを入れてヘッダーと同じようにスクロールをさせたいです。
よろしくお願いいたします。横から失礼します。
スクロールしたときのボタンのスタイルの書き方は以下のようになります。
.header_scrolled .vk-mobile-nav-menu-btn.position-right { }スクロールしているかどうか以外にも以下のことを考慮して
ボタンのスタイルを CSS で記述する必要があります。[1] ログインしている状態かどうか（ツールバーの有無）
[2] タブレットなどのモバイル端末（body.device-mobile）への対応
[3] 画面幅を変えても見やすい位置になるように調整する下に行くほど難易度が上がります。特に [3] は苦労します。
いまのヘッダーのナビは項目が8個もあって文字数も多めですが、
これによりさらに [3] の難易度が上がっています。どうしてもやってみたい（やらなければならない）ということでなければ、
下記の代替案ではいかがでしょうか？(1) メニューを並べた固定ページを作る。
(2) 画面右側の [資料請求]・[モデルハウス予約] の上にボタンを追加して、(1) にリンクする。
- このトピックに返信するにはログインが必要です。
