[ 解決済 ] KATAWARAでグローバルナビゲーションのサイズ変更

[ydk]

■ WordPress のバージョン
5.8.2

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

■ テーマの種類
Katawara

■ テーマのバージョン
1.10.0

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

■ プラグインの種類・バージョン
プラグインは使っておりません。

■ 期待する動作
グローバルナビゲーションのサイズ変更をしたい。
【目的】

パソコン表示のサイズで、中央展開のグローバルメニュー表示をしないで、
パッドサイズでもスマホ用のハンバーガーメニュータイプか左サイドのグローバルメニューの何れかに限定してメニュー表示したい。

【理由】

メニュー項目やメニューの文字数が多い場合、グローバルメニューを中央展開すると改行表示されてしまい、メニュー項目がわかりにくくなるため。

よろしくお願いいたします。

■ 自分で試した事
CSSの変更箇所が不明であるため、特段試すことはしておりません。

■ 症状が発生するブラウザ
Edgeなどすべて

■ 実際の症状
メニューテキストがずれる

[うなこ]

画面サイズ1199.98px以下でハンバーガーメニューを表示するようにする方法です。

【カスタマイズ】→【Katawaraモバイル固定ナビ】　の中の
【メニュー開閉ボタンの追加】の最初にメニューの開閉ボタンを追加する　の項目のチェックを外します。

【カスタマイズ】→【追加CSS】か、子テーマでしたら子テーマのstyle.cssに以下のCSSを追加してください。

/* ハンバーガーメニュー表示 */
@media (max-width:1199.98px){
.vk-mobile-nav-menu-btn {
display: block !important;
}
}
/* グローバルナビ非表示 */
@media (max-width:1199.98px){
.l-site-header_global-menu {
display: none;
}
}

【2022年2月9日追記事項】
※この記述は少し不足していました。以下が修正版です

/* ハンバーガーメニュー表示 */
@media (max-width:1199.98px){
.vk-mobile-nav-menu-btn {
display: block !important;
}
}
/* グローバルナビ非表示 */
@media (max-width:1199.98px){
.l-site-header_global-menu {
display: none;
}
}
/* モバイルナビの表示非表示*/
@media (min-width: 992px){
body.device-pc .vk-mobile-nav {
    display: block;
}
}
@media (min-width: 1200px){
body.device-pc .vk-mobile-nav {
    display: none;
}
}

• この返信は2年、 9ヶ月前にVektor,Incが編集しました。
• この返信は2年、 9ヶ月前にVektor,Incが編集しました。

[ydk]

情報のご提供をいただきましてありがとうございました。
おかげさまで、解決いたしました。大変助かりました。

なお、もし可能であれば、デフォルトの1200px以上から左サイドメニューの表示分岐ではなく、
992pxからに変更することは可能でしょうか。

よろしくお願いします。

[うなこ]

>デフォルトの1200px以上から左サイドメニューの表示分岐ではなく、992pxからに変更することは可能でしょうか。

cssを上書きしまくれば、おそらくできないこともないと思いますが、、、ちょっと大変かなという印象です。
答えになっておらずすみません。。。

頂いたご意見は今後の参考にさせていただきます。
今後ともよろしくお願いいたします。

• この返信は2年、 10ヶ月前にうなこが編集しました。

[ydk]

ご回答いただきましてありがとうございます。
そうですよね。対象となるCSSファイルが多いので、変更はかなり大変だと思います。

もし、バージョンアップなどでご対応ができるようであればうれしいです。
今回は、いろいろとサジェスチョンいただきましてありがとうございました。

[yano]

本トピックで解決できなかった為、こちらに投稿させていただきます。

うなこ様ご提示の下記内容にてCSSカスタマイズを試みました。
＜状態＞
今までメニューが改行されていた画像幅（横幅1000px)）の時に、ハンバーガーメニューは表示されますが、
クリックしても「×」マークが出るだけで、メニューがプルダウンされません。

さらに横幅を狭くすると（モバイル固定ナビが表示されるタイミング）では、
プルダウンメニューが表示されます。

ご教授いただけるようでしたら、よろしくお願い致します。

下記、うなこ様のアドバイス
/* ハンバーガーメニュー表示 */
@media (max-width:1199.98px){
.vk-mobile-nav-menu-btn {
display: block !important;
}
}
/* グローバルナビ非表示 */
@media (max-width:1199.98px){
.l-site-header_global-menu {
display: none;
}
}

[うなこ]

>クリックしても「×」マークが出るだけで、メニューがプルダウンされません。

現在もメニューが展開されない状態でしょうか？
スマホでは展開できていますか？

[yano]

うなこ様　ご確認ありがとうございます。

現在も表示されません。（スマホでは下記「C」でプルダウン表示されます）
katawaraの画面横幅サイズをABCで分けたとすると、
メニューの位置は
A サイドメニュー
B TOP画像上
C モバイル固定ナビ（表示にした場合）
の３段階になるかと思います。

アドバイスのCSSカスタマイズは、Bの画面サイズになると思いますが、
PC上で、Aの画面から横幅を小さくしていった時、Bの画面でハンバーガーメニューは表示（グローバルメニューは非表示）されますが、「×」マークが出るだけで、メニューがプルダウンされません。
（Bの画面ですので、モバイル固定ナビは非表示）

という状況です。

ご確認よろしくお願い致します。

[うなこ]

確認できました。cssが不足していたようです、、すみません。
いかがでしょうか。

追加したCSS

/* モバイルナビの表示非表示*/
@media (min-width: 992px){
body.device-pc .vk-mobile-nav {
    display: block;
}
}
@media (min-width: 1200px){
body.device-pc .vk-mobile-nav {
    display: none;
}
}

完成版はこちらです

/* ハンバーガーメニュー表示 */
@media (max-width:1199.98px){
.vk-mobile-nav-menu-btn {
display: block !important;
}
}
/* グローバルナビ非表示 */
@media (max-width:1199.98px){
.l-site-header_global-menu {
display: none;
}
}
/* モバイルナビの表示非表示*/
@media (min-width: 992px){
body.device-pc .vk-mobile-nav {
    display: block;
}
}
@media (min-width: 1200px){
body.device-pc .vk-mobile-nav {
    display: none;
}
}

• この返信は2年、 9ヶ月前にうなこが編集しました。

[yano]

うなこ様　完成版で問題なく表示されました。

助かりました、お忙しい中ありがとうございます！

[投稿者]

投稿