解決済Welcart Basic1.2.3でレスポンシブメニューの表示崩れ

フォーラム テンプレート(テーマ) 【解決済】Welcart Basic1.2.3でレスポンシブメニューの表示崩れ

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

    こんにちは。

    Welcart Basicテーマを使ってサイトのリニューアルをしています。

    大変に便利に使わせてもらっているのですが、カスタマイズしていた際に偶然表示崩れを見つけました。

    うちの環境だけかと思ったら公式のデモでも同じ挙動でしたので一応ご報告です。
    https://themes.welcart.info/basic/

    Win8.1のChrome、FF、IE11で同じ結果になるのを確認しました。

    おかしいところは、メニュー(main-navigation)で、スマホビュー(タブレットビュー)のハンバーガーメニューを開いたままPCビューにブラウザのワイドを拡げたときに起こります。

    表示崩れというよりは、背景色が正しく表示されてないということだと思いますが。

    エンドユーザがこういった動作をやるかと云われれば微妙なところでとくに致命的とは思いませんが、絶対にやらないとも云えないかなと。

    ハンバーガーメニューが非表示になるときに(PCビューのブレイクポイントで)、ハンバーガーメニューが自動で閉じるようなプログラムだったらよさそうな気もしますね。

    すでに稼働中のショップもたくさんありそうなので、修正できそうならしてあげたほうがよさそうに思いました。

    #83095
    welcart
    キーマスター

    こんにちは

    上記症状を確認させていただきました。
    次期バージョンにて修正させていただきますので、
    お急ぎの場合は、以下のテンプレートファイルを修正ください。

    /themes/welcart_basic/style.css

    ◆ style.css 2037行目あたり

    
    
    header #site-navigation input#panel.on-off + div.nav-menu-open,
    header #site-navigation input#panel.on-off + div.header-nav-container {
    
    ・・・・
    
    }
    
    

    のセレクタに以下を追記ください。

    header #site-navigation input#panel.on-off:checked + div.nav-menu-open

    修正後は以下のようになります。

    
    
    header #site-navigation input#panel.on-off + div.nav-menu-open,
    header #site-navigation input#panel.on-off:checked + div.nav-menu-open,
    header #site-navigation input#panel.on-off + div.header-nav-container {
    
    ・・・・
    
    }
    
    

    また、次期バージョンでも上記箇所を修正する事になりますので、
    直接(お使いの) Welcart Basic のスタイルシートに
    追記いただいて問題ございません。

    どうぞよろしくお願いいたします。

    #83121
    someone
    参加者

    さっそく返信いただいたのに遅レス恐縮です。
    ありがとうございます。

    この件なのですが、CSSでの修正じゃなくてHTMLの出力ソースの修正にはならないでしょうか。

    出力ソースを確かめましたところ、ブレイクポイントで検索窓の”search-box”というクラスに”On”が追加されていますね。

    これがブレイクポイントを戻しても”On”のクラスがついたままゆえに起きている不具合のように思いまして、ブレイクポイントを戻したときにこの”On”が消えてくれたほうが美しい解決なのではないかと思った次第です(見た目は”On”状態ではありませんし)。

    まあここはうちの都合でそういう挙動だったらありがたいなあというだけですので、CSSでみなさん問題なければ大丈夫です。

    ご検討くだされば幸いです。

    #100172
    embe
    参加者

    ——————————————-
    WordPress のバージョン:6.2.1
    Welcart のバージョン:2.8.18
    PHP のバージョン:(例 8.0)
    Welcart専用の拡張プラグインとバージョン:WCEX Multi Price 1.3.1
    ご利用の親テーマとバージョン :Welcart Basic 1.7.6
    ご利用の子テーマとバージョン :Welcart Basic Child 1.0.0
    症状を確認したブラウザ:
    サーバー【重要】:Bizメール&ウェブ
    ——————————————–

    どうもお世話になっております。
    こちらのハンバーガーメニューのバグなのですが、
    Welcart Basic 1.2.5 をリリースの際、修正したとの記載があり、
    style.cssを確認したところ、キーマスター様が書かれていたような内容に
    なっていたのですが、それでもやはり同様のバグが見られました。
    Google Chromeデベロッパーツールで確認したところ、
    どうもheader.phpを修正しないといけないような気がしています。
    間違っていたら申し訳ございません。
    インストール時のheader.phpのsite-navigationのコードは以下の通りです。

    <nav id=”site-navigation” class=”main-navigation” role=”navigation”>
      <label for=”panel”><span></span></label>
      <input type=”checkbox” id=”panel” class=”on-off” />
    <?php
    wp_nav_menu(
      array(
    ‘theme_location’ => ‘header’,
    ‘container_class’ => ‘nav-menu-open’,
    ‘menu_class’ => ‘header-nav-container cf’,
        )
      );
        ?>
    </nav><!– #site-navigation –>

    もし修正が必要であれば、ご教示いただけたらと思います。
    どうぞよろしくお願い致します。

    #100173
    furuta
    キーマスター

    embe 様

    こんにちは。
    こちらのトピックは6年前のものですので、恐れ入りますが新たにトピックを立てていただけますようお願いいたします。なお、「同様のバグ」とはどういった症状かをなるべく詳しくご記載いただけますでしょうか。環境情報の PHP のバージョン、症状を確認したブラウザも記載いただけますようお願いいたします。

    • この返信は1年、 1ヶ月前にfurutaが編集しました。
    #100175
    embe
    参加者

    キーマスター様

    早速のご返信、どうもありがとうございます。
    同様のバグというのは、「ハンバーガーメニューを開いたままPCサイズで表示した際のレイアウト崩れ」です。
    ブラウザはGoogle Chromeです。

    大変申し訳ございませんが、先ほど自力で修正できましたので、新たにトピックを立てるのは控えさせていただこうかと思います。
    (header.phpのwp_nav_menuで、item_wrapを使用することで改善できました。)
    早まって書き込みをしてしまい、お手数をおかけし、申し訳ございませんでした。

    今後ともどうぞよろしくお願い致します。

    #100176
    furuta
    キーマスター

    embe 様

    ご連絡いただきありがとうございます。ご自身で修正されたとのこと承知いたしました。
    こちらのトピックは「解決済み」とさせていただきますのでご了承ください。引き続き Welcart をよろしくお願いいたします。

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