【QooQ】ナビゲーションバーを上部に固定する方法

2020/03/23 2

前回の記事で「ナビバーを上に張り付ける(固定する)カスタマイズも知りたい」というリアクションを頂きましたので、リクエストにお応えして手順を紹介したいと思います。(リクエストがなくてもたぶん書いてたと思いますがw)

下にスクロールしてもナビバーが上に固定された状態で着いてくるようになります。
数行の CSS を追記するだけの簡単作業です。
同じようなレイアウトのテーマであれば、QooQ 以外でも 適用できるかも。ちなみに私、シンプルテーマを使ってた時もこのカスタマイズをやってました。

ナビバーの位置

QooQ のカスタマイズでナビバーをヘッダーの下に移動させている方が結構多いようですが、ナビバーがヘッダーの上にあるか下にあるかでそれぞれ追加コードが異なります。

ちなみにナビバーとヘッダーの位置を上下入れ替える方法は、こちらのブログ記事でとても解り易く解説されていますのでご参照下さい。

moca*BloggerメモimageBlogger「QooQ」ナビゲーションバーのカスタマイズ Blogger日本語テンプレート「QooQ」のナビゲーションバーをカスタマイズします。 ちなみに、「QooQ」のナビゲーションバーはブログタイトルの上にあります。 一番上のグレーの部分がナビゲーションバーです。 初期設定では、左端の「ホーム」しか表示されてい...https://moca-memo.blogspot.com/2019/12/blogger-qooq-navi.html

テーマ編集は必ず予めバックアップを取ってから行って下さい。

追記 CSS


ナビバーがヘッダーの上にあるデフォルトの状態の場合



ナビバーとヘッダーの間に隙間ができたり、重なってしまう場合は
#header の margin-top の値で微調整して下さい。

CSS#navigation {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 5;
}
#header {
    margin-top: 30px;
}

ナビバーをヘッダーの下に移動させている場合



※ position:sticky は IE では非対応のため、ナビバーが固定されません。

CSS#navigation {
    position: sticky;
    top: 0;
    z-index: 5;
}

補足

自動目次やスムーススクロールを導入されている環境の方は、こちらの記事も御覧ください。
スクロール停止位置で見出しとナビバーが重なる問題の改善方法です。

自動目次とスムーススクロール (2020/1/14 追記) | ふじろじっく





RECENT

ARCHIVE

COMMENTS