モバイル表示時のヘッダー固定時のページ内リンクのズレを解消する方法をご教示いただければ幸いです。
現在position: fixed;の固定ヘッダーの中にメニューがありその中にページ内リンクをつけております。
対応策として
css
1.anc::before { 2 content: ""; 3 height: 100px; 4 margin-top: -100px; 5 display: block; 6 visibility: hidden;
を書いて.anc部分のズレはPCでは無事にキレイに見えるのですが
モバイル(iPhone8)で見た際にズレてやはりヘッダーに被ってしまいます。
モバイル時にメディアクエリで
css
1.anc { 2 -webkit-justify-content: flex-start; 3 justify-content: flex-start; 4 -webkit-flex-wrap: wrap; 5 flex-wrap: wrap; 6 -webkit-display: flex; 7 display: flex; 8 margin: 2em 0;
が追加されます。
これが何かジャマしているのでしょうか。。
どなたか改善方法をご教示いただければ幸いです。