【Bootstrap4】透明で背景が見えるおしゃれなnavbarを作ろう

きれいなウェブサイトのBootstrapテンプレートを見ると、navbarの背景色が透明で、後ろの背景画像が見えるものがあるかと思います。

Bootstrapの公式サイトのどこを見ても透明なnavbarの作り方が載っていない！どうしても作りたい！透明なnavbarの作り方を解説します。

Contents

透明で背景が見えるおしゃれなnavbarの作り方

透明で背景の画像が見えるおしゃれなテンプレートを見かけます。

これの作り方を紹介します。

実はnavbarは仕様として、元々背景色がついていません。navbar自体は透明です。

bg-darkなどで背景色を指定することで色がついています。

なのでnavbarを透明にするには、bg-●●のクラスを取ればOKです。

ではHTMLを記述しましょう。

<nav class="navbar navbar-expand-md navbar-dark">・・・中略・・・</nav>
<div class="bg-sample">・・・中略・・・</div>

navタグにbg-darkなどの背景色の指定を入れないことで、透明のnavbarが作れます。

navbar-darkは文字の色の変更クラスなので、つけてOK。リンクの文字色をまとめて指定してくれます。背景とする画像が明るければnavbar-light、暗ければnavbar-darkをつけましょう。

navの下の項目にbg-sampleという名前をつけました。

CSSは以下のように記述しました。

.bg-sample{
background-image:url(背景画像のurl);
min-height:500px;
margin-top:-70px;}

min-height	背景画像を表示する最低の高さ。
margin-top	マイナスの値を指定することで、navbarの下に背景画像を滑り込ませることができます。

今回は少しmin-heightの高さを高めに取ってみました。

margin-topの指定がない場合、以下の画像のようになります。

navbarがあって、その次に項目といった感じです。画面右側にはSearchのボタンが見えると思います。

こういう透明のnavbarを作りたいときは、必ずその次の項目をnavbarの幅にあわせてmarginをマイナス指定してあげてください。

左側のメニューが見えない理由

右のSearchの文字は残っているのに、左側のメニューが見えませんね。

理由はメニューの文字が白で書かれているから、背景色と同化しています。

navbarの文字の色は、navbar-darkを指定すると明るく、navbar-lightを指定すると暗くなります。

背景色が暗ければ文字は明るい方が、背景色が明るければ文字は暗い方が読みやすいです。背景につける画像の色によって文字の色も変えましょう。

navbarの仕様について詳しく知りたい方は以下の記事をどうぞ。