[ 解決済 ] ナビゲーションメニューについて

[VWSカスタマー]

■ WordPress のバージョン
7.1.4

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 )

■ テーマのバージョン
15.43.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
グローバルメニューで親と小メニューそれぞれパソコンでもスマホでも指定した固定ページに飛ばしたい

■ 自分で試した事
階層を変えてみましたが同じ状況です。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
ヘッダーナビゲーションメニューに親（例：介護施設一覧）と子をそれぞれメニューとして設置（それぞれ固定ページ）だとした場合、パソコン表示の場合親メニューに飛べるのですが、スマホ表示の場合子メニューにしか飛べません。双方で親メニュー（固定ページ）にも飛ばしたいのですが、可能でしょうか？また不具合なのでしょうか？

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[対馬 俊彦]

[外観] → [カスタマイズ] → [追加 CSS] に入力されている以下のコードが原因です。

/*開閉時ハンバーガー*/
@media (max-width: 1200px) {
.vk-menu-acc .acc-btn {
border: none;
background: var(--vk-menu-acc-icon-open-black-bg-src) right 50% no-repeat;
width:100%;
right: 0;
top: 0;
height: calc( 24px + 1.4em );
background-size: 25px;
}

このコードを削除すれば「期待する動作」になると思いますが、
このコードを追加した人にどのような意図で追加したのかを
確認しておくのが無難だと思います。

[Y.INABA]

URL先を確認させていただきましたところ、おそらく以下の追加CSSが原因と思われます。

.vk-menu-acc .acc-btn {
border: none;
background: var(--vk-menu-acc-icon-open-black-bg-src) right 50% no-repeat;
width:100%;
right: 0;
top: 0;
height: calc( 24px + 1.4em );
background-size: 25px;
}

上記のうちwidth:100%;の指定が入っているため、該当親メニューのどの箇所をタップしてもスムーズに開閉できるようになっていますが、一方で文字リンクの箇所も開閉する作用が働くことになります。

対策としては、width:100%; を消していただくのが良いのではないかと思います。
ただし、どこの箇所をタップしてもスムーズに開閉するということはできなくなり、開閉のためにアイコンをクリックする必要がありますので、一長一短だと思います。

（対馬様、すみません。被りました）

[VWSカスタマー]

お二人ともご丁寧なアドバイスありがとうございます。アドバイスを受けてあらためて確認したところ、モバイル固定メニューに切り替えたのに以前に設定したCSSが残ったままでした。お二方のご助言通りこちらを削除することで解決することが出来ました。この度は誠にありがとうございました。

[対馬 俊彦]

解決できてよかったです。

原因の一端は私みたいですね😅

レスポンシブ対応時のハンバーガーメニューのクリックに関して

[投稿者]

投稿