固定ヘッダーの時にアンカーリンクを設定すると、ヘッダーの下に若干隠れてしまう・・・これあるあるのようで、検索すると解決策を書いてくださっているWebサイトがたくさんあります。
scroll-padding-top でヘッダーの高さを指定することだそうです。
ですが、制作しているサイトではWordPressを利用しているからか、それだけではうまくいきませんでした。
諦めて固定ヘッダーをやめようか・・・と思い始めた矢先に、ふと思いつき
もしや、WordPressのアドミンバーが原因？
そこで、試しに、
:root{
–wp-admin–admin-bar–height:0px;
}
を設定してみたところ、一般ユーザーからの閲覧環境ではアンカーリンクずれ解消できました。
ちなみに・・・・
:root{
–header-height:60px;
scroll-padding-top:calc(var(–header-height) + var(–wp-admin–admin-bar–height)) !important;
}
このように、アドミンバーの高さを0pxに指定しないと、うまく動作しませんでした。
ただし、WordPressにログインした状態でサイトを閲覧すると、アンカーリンクずれは残ったままです。引き続き、調査したいと思います！
コメント