いつもお世話になっているWordPressテンプレートであるxeory-extensionのヘッダーメニューを固定させるための備忘録です。半日ほど試行錯誤しましたが、あーでもないこーでもないとやって結局以下のCSSで固定することができました。
ポイントはなんだったのかいまだに不明なんですが(汗)とりあえずこちらでできました。
xeory-extensionはphpを弄ろうと思うとなかなか凝った作りになっていて迷宮入り寸前でしたが、多分、z-index(要素の重なりの優先順位を決めるやつ)を使ってみたのが上手いこといったポイントなのかな―?と勝手に思っています。
ちなみにスマホ用のサイトはレスポンシブデザインなので、本来は綺麗なデザインなんですが、こちらの方法だとちょっと不細工になってしまうためプラグインを使ってXeory Baseに切り替えて使用しています。
CSS
/*ヘッダー固定*/ #header { position: fixed; top: 0; right:0; left: 0; z-index: 100; margin-bottom: 0; }