WordPessのナビゲーションメニューがスマホだとはみ出す!スマホ表示の時だけスクロール画面にする方法

wordpress

ある日突然スマホ表示のナビゲーションメニューが、画面からはみ出した!

ほとんどのテーマには現在『レスポンシブデザイン』という機能がデフォルトでついていて、特別な設定とかしなくても、パソコンで見た時はその画面サイズに、スマホで見るとスマホ画面のサイズに合った画像や文字の大きさになるよう設定されていますよね。

ところが僕の場合、浅く身につけたプログラミング知識(HTML、CSS、PHP)だけでサイトのカスタマイズをあれこれ試してしまったせいで、ある日気づくとスマホ画面でハンバーガーマーク(というのだそうですね。これ↓)と検索ウインドウが完全に消失していたのです!

色々追加していたcssやphpのコードを削除したり元に戻したりすることで何とか検索ウインドウとハンバーガーマークは復活!

復活はしたのですが、スマホでナビメニューを表示させると…

本来KNOWLEGEの下(矢印の更に下)までナビゲーションが続くのですが・・・

はみ出てる!

しかもスクロール出来ない!

「僕ごときのサイトのメニューの不具合など誰も困らないだろう」とは思ったものの、その道で食って行きたいと思っている人間の作ったサイトがこのようなことではやはり問題あり!

ってことで修理に取りかかったのでした。

具体的にやったこと(画像つき)

まず僭越ながら僕のサイトで具体例を見ていきましょう。

通常、ヘッダー部分にあるメニューは大項目だけ表示されていますよね。

↓こんな感じ。

 

で、ポインターを合わせるとズラズラっと、小項目が表示されます。

↓こんな感じ。

ところが、スマホで見ると、

こんな感じ↓

 

少し分かりづらいかもしれませんが、メニューが『KNOWLEDGE』までで終わってしまっていて、それより下のメニューが見られません。

下記がその当時のCSS(記憶が正しければ・・・)

.site-navigation ul ul { 
margin-left: 20px;
overflow: auto; 
max-height: 100%;  /* ナビスクロール高さ */
width: 180px;
}

ネット上で色々検索した結果、下記のようにoverflowを『auto』ではなく『auto-flow』に設定する必要があるとのこと。

.site-navigation ul ul { 
margin-left: 20px;
overflow: auto-flow;  /* ナビスクロール */
max-height: 100%;  /* ナビスクロール高さ */
width: 180px;
}

しかし、変わらず。ナビ部分の下が途切れ、全く動かない。

『max-height』をpxではなく、vhで指定することでナビゲーションがスクロールし、細部まで表示されると言うことが判りました。※スミマセン、参考にさせていただいたサイトのURLを紹介したいのですが、記録していなかったため、どこにあるか判らなくなってしまいました。思い当たる方がいらっしゃいましたらご連絡ください。

.site-navigation ul ul { 
margin-left: 20px;
overflow: auto-flow;  /* ナビスクロール */
max-height: 53vh;  /* ナビスクロール高さ */
width: 180px;
}

この場合PCだと問題なし、

スマホ画面を確認してみると、やはり動かず。

ちなみにここまでのコードのスマホ画面、ログイン状態で確認すると・・・

 

背景(赤枠の部分)はスクロールするのですが、ナビゲーションは全く動かず。という状態でした。

とにかくWEBで見つけたコードを片っ端から試してみた

Web上には『height: 100%;』『position: fixed;』『z-index: 99;』『-webkit-overflow-scrolling: touch;』などコードを挿入すればよい等の案もあったので全て試しましたが、それでもスクロールせず

ちなみに『overflow-y: scroll;』を試した場合。

.site-navigation ul ul {
overflow-y: scroll;
width:100%;
max-height: 50vh; /* ナビスクロール高さ */
}

これを試したときは(ログイン状態だと)スクロールはするものの、下の方の親要素が完全に重なっている

 

やみくもに次は、『overflow: auto-flow;』を元の『overflow: auto;』に戻してみると・・・

.site-navigation ul ul {
margin-left: 20px;
overflow: auto;/* ナビスクロール */
max-height: 53vh; /* ナビスクロール高さ */
width: 200px;
}

変わらず・・・変わらずなのですが、ログイン状態で見てみると・・・

おおっ!ナビの子要素が見事にスクロールされ、全て表示されるようになっている!ログイン状態のみとはいえ、明確な変化が現れた!

 

ちなみにPCで見るとどうかな・・・

 

あれ?変なところに縦と横のスクロールが・・・しかもサブメニューが表示されない!

これだと全く意味ないですね。

ログアウトした状態でも、スマホ画面でナビがスクロールするように、そしてPC画面では元のナビがアコーディオン上に表示されるようにならないと・・・。

@media screenを設定してみた

 

そこで当時はよくわからず「スマホだからメディアスクリーンを指定すれば良いのかな?」と下記を指定。

@media screen and (max-width: 400px) {
.site-navigation ul ul {
overflow: auto; /* ナビスクロール */
max-height: 50vh; /* ナビスクロール高さ */
width: 200px;
}
}

すると

 

ログインしていなくても、ブルーのライン内が縦にスクロールされて、全体がスマホ画面に収まるようになりました!

ではパソコン画面で確認へ!

 

無事元のアコーディオンに戻っています!

変なスクロールが無くなり、子要素も自動的に表示されるようになりました。

後はタブレットで上手く表示されていれば全てOK・・・なのですが

最後はタブレットへ。

ハンバーガーメニューをタップしてみると・・・

 

げっ!またメニューがはみ出してスクロールしない!

そうか。スマ歩幅よりタブレット幅が広いから当然やな。

そこで今度はメディアスクリーンの幅を673pxに変更。

こうすることで、横幅673px以下のものを表示するときだけ、その下の条件(スクロールやなんやらね)で表示するという設定ができました。

タブレットや幅広のスマホでも大体673px以下なので、

@media screen and (max-width: 673px) {

そして確認。

 

今度はタブレットでも上手くいきました!

最後に

本件、突然表示が崩れ、「慌てて色々試した結果、なんとなく上手くいった」というのが実際のところで、何ともまとまりのない投稿になってしまいました。

参考にさせていただいたサイトさんも結構あったのですが、結局どれだったのかわからなくなってしまい・・・。

後日、参考になったサイトさんを探しているときに下記ページを見つけました。すごく参考になりそうだったので、書き留めておくことにしました。

CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】

[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法

Eye-Catch Photo by freestocks.org on Unsplash

コメント

タイトルとURLをコピーしました