スマホでメニューが最後まで表示されない

2017 年 1 月 27 日

ホーム フォーラム バグ報告 スマホでメニューが最後まで表示されない

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

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #81931

    narko
    参加者

    WordPress のバージョン:4.7.1
    Welcart のバージョン: 1.9.1
    ご利用のテーマ:nova

    お世話になっております。
    pcでは問題ありませんが、スマホでの表示の際
    あるページを見たときにメニューが最後まで見れません。

    そのあるページとは内容が少ないページで、それに対してメニューの方が長いので
    ページの表示範囲よりも長いメニューの部分が見れないのです。

    説明がうまく伝わっていないかもしれませんが、
    是非ともよろしくお願いいたします。

    #81942

    ohnishi
    参加者

    こんにちは

    スマホで閲覧した際、
    グローバル・メニューの高さを指定し、
    メニューの高さが、指定した高さを上回った場合、
    スクロールバーを表示させてみてはいかがでしょうか?

    お使いのテーマ(welcart_basic-nova)の
    style.css に以下のスタイルを記述してみてください。

    
    
    header div.nav-menu-open {
    	height: 〇〇〇px;
    	overflow-y: auto;
    }
    
    @media screen and (min-width: 62.5em) {
    	header div.nav-menu-open {
    		height: auto;
    	}
    }
    
    

    〇〇〇の部分は、コンテンツ量が少ないページをスマホで閲覧した際、
    メニューが表示されるように適当な値を記述ください。

    #81962

    narko
    参加者

    お世話になります。

    ありがとうございます。
    早速style.cssに記述してみましたが、変わりません。
    他に何かしなくてはいけないのでしょうか?

    #81963

    ohnishi
    参加者

    style.css のどの部分に記述されましたか?
    スマホのブラウザキャッシュが効いているという事はございませんか?

    上記スタイルを記述することにより、
    指定した高さを上回った場合に、
    メニューがスクロールされていることが確認できております。

    ※スマホの場合、デフォルトではスクロールバーは表示されないようですので、
    「スマホでスクロールバーを表示」などで検索してスタイルを追記ください。

    #81965

    narko
    参加者

    お世話になります。

    記述の場所を変えると表示されるようになりました!
    ありがとうございました。

    #81970

    narko
    参加者

    お世話になっております。

    すいません、メニュー自体は改善されたのですが他の部分の表示がおかしくなってしまいました。
    具体的に、style.cssのどの部分に記述すれば良いのでしょうか?
    初心者で申し訳ありませんが、よろしくお願いいたします。

    #82002

    narko
    参加者

    お世話になります。

    早く具体的に記述する場所を教えてください。

    #82013

    narko
    参加者

    担当者 様

    お世話になります。

    教えていたかなくても構いませんが、テンプレートの方を直してください。

    本来まともに表示されていない時点でおかしくないですか?

    こちらはお金を払って買っているんですよ。

    #82023

    yasumax
    キーマスター

    こんにちは。

    応急処置となりますが以下のように修正を加えてみてください。
    style.css 476行目

    header div.nav-menu-open,
    header div.header-nav-container {
    	display: block;
    }

     ↓

    header div.nav-menu-open,
    header div.header-nav-container {
    	display: block;
    	overflow: auto;
    	height: 500px;
    }

    height: 500px;はコンテンツの高さにあわせて適宜修正してください。

    style.css 1853行目~
    @media screen and (min-width: 62.5em) {~中略~}内の何処かに以下のスタイルを追加してください。

    header div.nav-menu-open,
    header div.header-nav-container {
    	height: auto;
    }

    次期バージョンにて修正が加わりますが、リリース時期は未定です。
    リリース次第Welcart コミュニティにて修正内容とあわせて報告いたします。

    #82419

    narko
    参加者

    返信遅くなりました。
    改善されました。ありがとうございます。

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

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