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

VWSとは フォーラム Katawara [ 解決済 ] KATAWARAでグローバルナビゲーションのサイズ変更

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

  • このトピックには9件の返信、3人の参加者があり、最後にyanoにより6ヶ月、 1週前に更新されました。
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #60302

    ydk
    参加者

    ■ WordPress のバージョン
    5.8.2

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

    ■ テーマの種類
    Katawara

    ■ テーマのバージョン
    1.10.0

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

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

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

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

    【理由】

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

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

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

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

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

    #60343

    うなこ
    モデレーター

    画面サイズ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;
    }
    }
    • この返信は6ヶ月、 1週前にVektor,Incが編集しました。
    • この返信は6ヶ月、 1週前にVektor,Incが編集しました。
    #60352

    ydk
    参加者

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

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

    よろしくお願いします。

    #60354

    うなこ
    モデレーター

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

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

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

    • この返信は7ヶ月前にうなこが編集しました。
    #60369

    ydk
    参加者

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

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

    #61841

    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;
    }
    }

    #61850

    うなこ
    モデレーター

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

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

    #61853

    yano
    参加者

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

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

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

    という状況です。

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

    #61855

    うなこ
    モデレーター

    確認できました。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;
    }
    }
    • この返信は6ヶ月、 1週前にうなこが編集しました。
    #61860

    yano
    参加者

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

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

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • このトピックに返信するにはログインが必要です。