header fixed時にWordPressのツールバーが重なってしまう原因について

headerをfixedに設定するとheaderとwordPressのツールバーが、重なってしまい困ったという人もいると思う。

自分も当サイトをいじっているときに次のようになった。なぜかheaderが上のほうにずれるんだよなあ。

よく見てみるとheaderが上にずれた分の下の隙間の高さがwordpressのツールバーと同じ高さになっているように見えた。

おそらく次のjsファイルのコードが原因かと思う。

$(function() {
var height=$(“header”).height();
$(“body”).css(“margin-top”, height);
});

上記のコードはheaderにfixedを設定した際に、全体のページの高さを調整するために記述したコード。おそらくwordpressのツールバーの高さも上記のコードに影響を受けて、ツールバーの高さを取得してしまっているんだと思う。

実際にツールバーを表示させない設定を管理画面で行うと、正常に戻る。

ツールバーはユーザーに表示されるものじゃないので、特にこのままでも問題ないかと。

ちなみにツールバーの表示を消すには、管理画面のプロフィールにあるツールバーの「サイトを見るときにツールバーを表示する」のチェックを外そう。