次にやりたかったのが、ヘッダーの固定です。しかし、Java Script はおろか、CSSすらイタズラ出来ない私にとっては、プラグイン頼みです。そこで、使わせていただいたのが「Sticky Menu & Sticky Header」プラグインです。
Sticky Menu & Sticky Header
このプラグインをインストールして、有効化すると、バックエンドの設定メニューに項目が追加されます。
メニューにアクセスしてみます。
この、Sticky Element に固定したいパーツの ID か class を入れるらしいのですが、何を入れると固定するのかよく分からなかったので、試しに「header」と入力したら、ヘッダーが固定しちゃいました。
なんと簡単な・・・。
しかし、ヘッダーの背景が透明なので、スクロールするとコンテンツと重なってしまします。
しかも、重なり順がデフォルトでは低いみたいで、何かと重なった時にはメニューのリンクが効かないような感じだったので、次のように、Advanced setting で Z-index を 100 にしてみました。
これで、メニューが最前レイヤーになったようで、マウスオーバーすると、最優先でメニューを選べるようになりました。
あとは、見ずらいので、ヘッダーの背景色をほんのり透過する別の色にして、枠線もつけて何となくやりたい事が実現できた気がします。
その方法は、概観＞エディター＞パターン＞ヘッダー＞ヘッダーの編集と進んで
背景の所をクリックすると、ヘッダーの背景色を選べるので、好きな色を選びます。
まず、真ん中のカラーバンドで基本色を選び、上の正方形から色合いを選び、カラーバンドの下が透過率です。
ほんのちょっと左にずらすだけで結構透過しました。