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

[someone]

こんにちは。

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

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

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

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

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

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

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

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

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

[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 のスタイルシートに
追記いただいて問題ございません。

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

[someone]

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

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

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

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

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

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

[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 –>

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

[furuta]

embe 様

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

• この返信は11ヶ月、 1週前にfurutaが編集しました。

[embe]

キーマスター様

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

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

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

[furuta]

embe 様

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

[投稿者]

投稿