【QooQ】ナビゲーションのカスタマイズ-てぃものブログテスト帳

ナビゲーションの位置の変更・固定。検索ボックスを入れてみました。

この記事を参考に作業しました。

やった作業は参考記事の

の3つです。

*1
ナビゲーションの位置変更（目次1）ですが、
z-index: 999;だとナビゲーションバーの位置を固定すると画像を(Lightbox)を表示した時に、Lightboxとナビゲーションバーが重なってしまいます。

数値をz-index: 5;に変更したら大丈夫でした。
ちなみにz-indexは重なりの優先度で数値が大きすぎるからバグってたようです。

目次3~3-2の内容は問題なさそうだったのでスルーしました。

ナビゲーション固定は邪魔なので削除しました。
画面が広いPCなら気にならないけど、スマホだと画面狭くなって邪魔です。
上にメニューあってもスマホじゃ押しづらいし使わないかなと。

スマホ検索ボックスを小さく

スマホで見た時に、そのままでは検索ボックスが大きすぎるので小さくします。

ナビゲーションバーの微調整(目次5)で追記したCSSに下記を記述します。
@media ( max-width : 768px )内に追記すれば大丈夫です。
サイトに応じてwidthを変えてください。

  #search-box-form {
    width: 150px;
 	 }

おしゃれになるのでやってみました。

この記事を参考にしています。

CSSに下記を記述します。

ナビゲーションの設定がまとまっている所の最後に置くと良いです。

#navigation{辺りに設定がまとまっています。

/* ナビゲーションバーを 透けさせる */
#navigation {
     opacity: .9;　/* 透けさせる */
}

opacity:で設定する数値は0.0（透明）～1.0（不透明）で設定します。
私は0.9にしてみました。

同じ記事を参考にマウスオーバーした時に、青い下線を表示して強調するようにしてみました。

/* ナビゲーションバーを リンクの強調 */
#navigation-content li a:hover{
     border-bottom: 2px solid #6495ED;
}

色は他の色に変えれます。