きれいなウェブサイトのBootstrapテンプレートを見ると、navbarの背景色が透明で、後ろの背景画像が見えるものがあるかと思います。
Bootstrapの公式サイトのどこを見ても透明なnavbarの作り方が載っていない!どうしても作りたい!透明なnavbarの作り方を解説します。
透明で背景の画像が見えるおしゃれなテンプレートを見かけます。

これの作り方を紹介します。
実はnavbarは仕様として、元々背景色がついていません。navbar自体は透明です。
bg-darkなどで背景色を指定することで色がついています。

なのでnavbarを透明にするには、bg-●●のクラスを取ればOKです。
HTMLの記述
では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の記述
CSSは以下のように記述しました。
.bg-sample{
background-image:url(背景画像のurl);
min-height:500px;
margin-top:-70px;}
min-height | 背景画像を表示する最低の高さ。 |
---|---|
margin-top | マイナスの値を指定することで、navbarの下に背景画像を滑り込ませることができます。 |
今回は少しmin-heightの高さを高めに取ってみました。
margin-topの指定がない場合
margin-topの指定がない場合、以下の画像のようになります。

navbarがあって、その次に項目といった感じです。画面右側にはSearchのボタンが見えると思います。
こういう透明のnavbarを作りたいときは、必ずその次の項目をnavbarの幅にあわせてmarginをマイナス指定してあげてください。
右のSearchの文字は残っているのに、左側のメニューが見えませんね。
理由はメニューの文字が白で書かれているから、背景色と同化しています。
navbarの文字の色は、navbar-darkを指定すると明るく、navbar-lightを指定すると暗くなります。
背景色が暗ければ文字は明るい方が、背景色が明るければ文字は暗い方が読みやすいです。背景につける画像の色によって文字の色も変えましょう。
navbarの仕様について詳しく知りたい方は以下の記事をどうぞ。
