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

[nar]

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

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

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

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

[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;
	}
}

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

[nar]

お世話になります。

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

[ohnishi]

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

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

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

[nar]

お世話になります。

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

[nar]

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

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

[nar]

お世話になります。

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

[nar]

担当者　様

お世話になります。

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

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

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

[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 コミュニティにて修正内容とあわせて報告いたします。

[nar]

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

[投稿者]

投稿