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

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

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

参考にしたページ

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

https://doggy-kbk12.com/fixed/

原因と解決法

<header>をposition:fixed;し、

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

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

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

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

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

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

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