【解決済】Modeのグローバルナビ、ヘッダーナビについて

[AKIYAMA]

——————————————-
WordPress のバージョン：5.7.2
Welcart のバージョン：2.2.4
PHP のバージョン：7.4.13
ご利用のテーマ：Welcart Mode
症状を確認したブラウザ：Chrome, Firefox
サーバー：Xserver
SSLの利用：常時SSL
——————————————–

お世話になっております。
グローバルナビ（メインメニュー）、ヘッダーナビ（サブメニュー）についてお尋ねします。
サイト構築がある程度完了し、動作確認を行っていたところ以下の現象が起きてしまい
フォーラム内やネット上の記事を検索しましたが同内容の記事が見つからずご教示いただきたく存じます。

1.グローバルナビゲーション（メインメニュー）について
　現在構築中のサイトはアパレルということもあり、子カテゴリーが多く、
　表示確認を行ったところブラウザの画面サイズによってはドロップダウン
　メニューの全てが表示されず途中で切れてしまいます。
　スクロールをするとドロップダウンメニューではなく、ページ自体がスクロールします。

2.ヘッダーナビ（三本線のサブメニュー）について
　こちらも項目数が多いと上記1同様スクロールされず、全て表示されません。
　（ページ自体がスクロールされる。）
　style.cssの「drawer-menu-pc」に「overflow-y:scroll」を追加したところ
　スクロールはしますがサブメニューを閉じると三本線が非表示となりました。

3.レスポンシブ表示のブレイクポイントについて
　グローバルナビのメニュー数が多い為、レスポンシブのブレイクポイントを変更したいです。
　style.css内「@media screen and (min-width: 55em)」のmin-widthを色々と
　変更してみましたが表示崩れや、三本線が消えるなどの症状が起きてしまいました。
　ヘッダーナビ（三本線のサブメニュー）にいくつかのメニューを追加し、
　グローバルナビの数を減らして対応しようと思いましたがヘッダーナビのメニューは
　アコーディオン化されない為断念いたしました。
　1,200px程ででモバイルメニューに設定できればと思っております。

　　
以上、誠にお手数ではありますが対応策をご教示願います。
宜しくお願いいたします。

　　　

• このトピックはAKIYAMAが3年、 5ヶ月前に変更しました。

[sagawa]

こんにちは。

「ヘッダーを固定にする」にチェックが入っている場合に、1.と2.の症状を確認いたしました。
こにらはWelcart Modeの次期バージョンで修正をいたします。

3.につきましては、style.cssファイルだけではなく、jsファイルなども修正が必要となります。
ご自身でのカスタマイズが難しい場合は、WelCustomよりご依頼いただければと思います。

[AKIYAMA]

ご回答ありがとうございます。

１、２の件については承知しました。
次回アップデートまでヘッダー固定は外して設定いたします。

３についてですがヘッダーナビは子カテゴリーのアコーディオン化はできないのでしょうか？
アコーディオン化が難しい場合、css、jsファイルなどの変更が必要との事ですが
具体的にどのファイルが該当するか教えていただけますか？

宜しくお願いいたします。

[sagawa]

AKIYAMA様

３についてですがヘッダーナビは子カテゴリーのアコーディオン化はできないのでしょうか？

ブレイクポイントを1200pxにされたいとの事でしたので、style.cssとjsファイルの修正をご案内しました。
ここでおっしゃっているアコーディオン化というのは、ヘッダーナビ（ハンバーガメニュー）内のメニュー表示はモバイル表示の時は子カテゴリーをアコーディオンで表示できるようにしており、PC表示では子カテゴリーは表示できないように制御しております。
このPC表示の時にも子カテゴリーをアコーディオンで表示されたいということでしょうか？

[AKIYAMA]

ご回答ありがとうございます。

まずstyle.css、jsファイルの修正についてですが、差し支え無ければ
どちらのjsファイルを変更すれば良いか教えていただけますか？

次にアコーディオン化についてですが、現状「グローバル・ナビ」に設定しているメニューは
モバイル表示時にアコーディオン化されますが、ここでお聞きしている
アコーディオン化につきましては「ヘッダーナビ」に設定しているメニューを
PC、モバイルのどちらも子カテゴリーをアコーディオン化できれば
ブレイクポイントの変更が不要になる為お聞きしました。添付画像をご確認ください。
現状の「ヘッダーナビ」では子カテゴリーはアコーディオン化されず
そのまま表示される仕様になっております。

お手数ですがご回答お願いいたします。

Attachments:

You must be logged in to view attached files.

[sagawa]

AKIYAMA様

失礼しました。
上記は「ヘッダーナビ」→「グローバルナビ」の間違いでした。
おっしゃる通り、「ヘッダーナビ」では子カテゴリーはアコーディオン化されずそのまま表示される仕様になっております。
失礼いたしました。
グローバルナビのアコーディオン化は/assets/js/header/menu-default.jsで行っておりますので、こちらを参考にしていただければ、ヘッダーナビもアコーディオン化できるかと思います。

[AKIYAMA]

sagawa様

ご回答ありがとうございました。
いただいた内容を参考にアコーディオン化いたします。
この度はありがとうございました。
今後とも宜しくお願いいたします。

[AKIYAMA]

度々失礼いたします。
先程該当ファイル（menu-default.js）の内容を確認しました。
アコーディオン化に必要な設定の確認は上記ファイルのみでしょうか？

上記ファイルに加え、「header.php」やその他のjsファイルの
変更が必要な場合はファイル名を教えていただく事は可能でしょうか？
宜しくお願いいたします。

[AKIYAMA]

というのも該当ファイルでは「.menu-item-has-children」の
クラス名がついたコードの制御（span）のみの様な気がするのですが
そのほかに必要なファイルがあるのでしょうか？
グローバルナビ同様のメニューをヘッダーナビに設定し、コード確認をすると
「.menu-item-has-children」のクラスは付加されておりますが
アコーディオン化はされませんでした。

function.phpやその他のファイルを確認しましたが
該当のファイルが見つけられませんでした。
そもそもアコーディオン化はstyle.cssでの設定なのでしょうか？

[AKIYAMA]

度々失礼いたします。
アコーディオン化は設定が複雑になるようであれば
お手数ですがブレイクポイントを変更する際に必要な
該当ファイルを教えていただけないでしょうか？
宜しくお願いいたします。

[sagawa]

AKIYAMA様

グローバルナビと同じ「下向き矢印（開く）」や「マイナス（閉じる）」のアイコン表示やヘッダーナビのアコーディオン化した後のスタイルを調整する場合はcssの編集も必要ですが、アコーディオンの動きにするだけであれば/assets/js/header/menu-default.jsファイルの記述だけで可能です。

また、ブレイクポイントにつきましては各所に記述しておりますため、ご自身でファイル検索をしていただき必要箇所を修正下さい。

また、ここではカスタマイズのレクチャやコードの提供はしておりませんので、ご自身でのカスタマイズが難しい場合は、WelCustomよりご依頼ください。

[AKIYAMA]

sagawa様

ご回答ありがとうございます。
内容理解いたしました。
Welcustomへの依頼含め検討いたします。
ありがとうございました。

[投稿者]

投稿