ヘッダーの固定

次にやりたかったのが、ヘッダーの固定です。しかし、Java Script はおろか、CSSすらイタズラ出来ない私にとっては、プラグイン頼みです。そこで、使わせていただいたのが「Sticky Menu & Sticky Header」プラグインです。

Sticky Menu & Sticky Header

メニューにアクセスしてみます。

この、Sticky Element に固定したいパーツの ID か class を入れるらしいのですが、何を入れると固定するのかよく分からなかったので、試しに「header」と入力したら、ヘッダーが固定しちゃいました。

なんと簡単な・・・。

しかし、ヘッダーの背景が透明なので、スクロールするとコンテンツと重なってしまします。

しかも、重なり順がデフォルトでは低いみたいで、何かと重なった時にはメニューのリンクが効かないような感じだったので、次のように、Advanced setting で Z-index を 100 にしてみました。

これで、メニューが最前レイヤーになったようで、マウスオーバーすると、最優先でメニューを選べるようになりました。

あとは、見ずらいので、ヘッダーの背景色をほんのり透過する別の色にして、枠線もつけて何となくやりたい事が実現できた気がします。

その方法は、概観＞エディター＞パターン＞ヘッダー＞ヘッダーの編集と進んで

背景の所をクリックすると、ヘッダーの背景色を選べるので、好きな色を選びます。