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

2017 年 6 月 8 日

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

このトピックには2件の返信が含まれ、2人の参加者がいます。5 ヶ月、 1 週前 someone さんが最後の更新を行いました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #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でみなさん問題なければ大丈夫です。

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

3件の投稿を表示中 - 1 - 3件目 (全3件中)

このトピックに返信するにはログインが必要です。