bootstrapでこんなnavとheaderを作りたいのですが…

Question

通常、bootstrapでナビゲーションバーとheaderを作るとそれぞれ区切られてしまうのですが、例えばAirbnbのようなサイトを見るとナビゲーションバーとheaderが区切られておらず、headerの大きい画像の上にナビゲーションバーが乗っています。（説明がヘタクソですみません…。なんて伝えたら良いかわからず…）

bootstrapであのようなナビゲーションバーとheaderが一体化したようなサイトを作るにはどのように書けば良いのでしょうか？

アドバイス頂けたら幸いです。宜しくお願い致します。

Comments

[buibui80]

具体的なURLやイメージ画像はありませんか？

[ryosukek]

ありがとうございます。
理想はこのようなイメージです。
http://habakiri.2inc.org/wp-content/uploads/2015/08/2.jpg

headerの背景色を透明にするのでしょうか？
でもその場合、jumbotronの画像にどうやって重ねるのか…？やっぱりわかりません。。
よろしくお願いします。

Answer 1

以下のURLを基準にすると、
http://getbootstrap.com/examples/navbar/

.navbarのmargin-bottomを20pxから−60pxなどのマイナス値で重なりを調整して、
.navbar-defaultのbackground-colorとborder-colorを使用しなければ
ナビゲーションバーの背景が透過します。

このページではjumbotronを使用しているので、
背景画像を当てはめてテストしてみると良いと思います。

Comments

[ryosukek]

なるほどー！.navbarのmargin-bottomをマイナス値にするという、意外と力技だったんですね！ありがとうございました！