[Blogger #004] ナビゲーションバーを固定する ＆ 検索ボックスを追加

今日もふじろじっくさんとこの真似です。一番上のナビゲーションバーが、固定されてて、スクロールしても、Homeボタンとか残ってる。検索ボックスまである。このクールなナビゲーションバーを真似ます。

とてもありがたいことに、記事にして頂いてるのでやってみるだけ。

【QooQ】ナビゲーションバーを上部に固定する方法 | ふじろじっく

【QooQ】ナビゲーションバーの中に検索ボックスを埋め込む

さて、その前に、そもそもナビゲーションバーの中身を設定します。レイアウトーナビゲーション内のページの右隅、編集から入ります。

このダイアログで設定。とりあえず、中身はないけど、Sitemapとかいれとく、あと本家を見習ってQooQってメニューを作っときました。そのうち、この記事を移そう。

これでできたのが、下記。

ここから、先ほどの記事を参考に、CSSをいじくります。

#navigation{
	padding: .2em 0 .2em 0;
	font-size: 1.5rem;
	background: $(brand.subcolor);
	color: $(brand.subfont);
	/*追加*/
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 5;

}
#header{
	background: $(brand.color);
	color: $(brand.font);
	 /*追加*/
    margin-top: 30px;
}

これで、固定されました。あとは、記事どおりに検索ボックスのHTMLとCSSを追加し、検索ボックス付きの固定ナビゲーションバーになりました。

今日は、ここまで。