ドロワーメニューがスマホ上でクリックしても表示されない問題の解決法

2020年9月15日2024年1月18日

ハンバーガーメニューを作っていて、クリックするとふわっとヘッダーの下から出てくるメニューを作っていたのだが、PCのCHROMEのデベロッパーツールでは問題なく表示されるのに、実際のスマホ（iphone11）では表示されない問題が起きました。

今回はそちらの原因と解決法を書いていきます。

本記事の目次

参考にしたページ

2時間ほど格闘した結果、下記のページを参考にさせていただいて解決することができました。

<header>をposition:fixed;し、

その子要素のドロワーメニューの<div>もposition:fixed;していたことが原因。

縦に短いヘッダーにfixedしていたので表示がされなかった。

なので、上部固定のヘッダーを<header>の子要素にあらたに<div>を作り、

そことの兄弟関係でドロワーメニューの<div>を並べてみたところ、解決。

<header>は意味合いといしてのタグとして、これにCSSで装飾せず、

<header>はrelativeさせて、その子要素に、上部固定ヘッダーや、クリック後に現れるメニューを兄弟関係でコーディングすることが大事。

<header>に色々CSSで装飾してしまっていたのが失敗でした。