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でみなさん問題なければ大丈夫です。

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

[投稿者]

投稿