バナー内のシャドウインジケータが付いたナビゲーションバー上のフローティングロゴ - ブートストラップ

Question

ブートストラップで次のように実装する正しい方法は？

ロゴは、ナビゲーションバーの「出てくる」とのバナーに及びます。バナーには内側の影があり、その背後には画像が回転するはずです。応答時には、通常のブートストラップ方式でナビゲーションが崩壊するはずです。

これまでのところ、私は中央にロゴを持って、次の2つの部分からナビゲーション崩壊を持つことができました：

<nav class="navbar navbar-inverse navbar-main"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand visible-xs" href="index.php">Logo</a> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.php">Home <span class="sr-only">(current)</span></a></li> 
      <li><a href="about-us.php">About Us</a></li> 
      <li><a href="media.php">Media</a></li> 
      <li><a href="events.php">Events</a></li> 
     </ul> 
     <div class="navbar-brand hidden-xs"> 
      <a class="white-circle" href="index.php"> 
       <img class="logo" src="http://excitive.me/demo/temp/logo.svg" alt="Logo"> 
      </a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="things-to-do.php">Things To Do</a></li> 
      <li><a href="offers.php">Offers</a></li> 
      <li><a href="index.php#location">Location</a></li> 
      <li><a href="book-now.php">Book Now</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

<div class="container"> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     </ol> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="http://excitive.me/demo/temp/banner-home-01.jpg" alt="Banner Alt"> 
       <div class="carousel-caption"> 
        Lorem ipsum 
       </div> 
      </div> 
      <div class="item"> 
       <img src="http://excitive.me/demo/temp/banner-home-02.jpg" alt="Banner Alt"> 
       <div class="carousel-caption"> 
        Dolor sit 
       </div> 
      </div> 
      <div class="item"> 
       <img src="http://excitive.me/demo/temp/banner-home-03.jpg" alt="Banner Alt"> 
       <div class="carousel-caption"> 
        Amet consectetur 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.navbar .container { 
    text-align: center; 
} 
.navbar-collapse .navbar-brand { 
    display: inline-block; 
    float: none; 
    padding: 0; 
    margin: 0 !important; 
    overflow: visible; 
} 
.navbar-collapse .navbar-brand .white-circle { 
    display: block; 
    width: 161px; 
    height: 161px; 
    background-color: white; 
    border-radius: 50%; 
    border: 1px dotted red; 
} 
.navbar-collapse .navbar-brand .white-circle .logo { 
    width: 144px; 
} 

https://jsfiddle.net/rvnwp1xv/

（通常のナビゲーションを表示するには、JSFiddleで出力パネルを拡張してください）

ここで、影とロゴをバナーに重ねる方法についての疑問が残っています。

レイアウトは固定幅に設定されていますので、私の次の試みは絶対配置を使用することです。しかし、そのバナーはHTMLのナビゲーションの前に来なければならないが、これは正しいとは言えない。

Answer 1

ロゴ重複バナーを作るために、あなたがイメージの親にプロパティpositionとz-indexを追加する必要があります。

.navbar-collapse .navbar-brand .white-circle { 
    ... 

    position: relative; 
    z-index: 2; 
} 

その後、あなたは親のサイズと、それは同じにするために、画像のサイズを大きくする必要があります。

.navbar-collapse .navbar-brand .white-circle .logo { 
    width: 161px; 
    height: 161px; 
} 

イメージサークルを作成する場合は、border-radius: 50%を追加してください。ブートストラップのクラスimg-circleを使用しました。
画像を中心にするには、div.collapse（navbar-brandの親です）にクラスtext-centerを使用しました。 はその後、私はグリーンの提案を使用しましたnavbarとlogoために影を作るために、おかげで彼を：

.navbar-header, 
.collapse.navbar-collapse, 
img.logo { 
    box-shadow: 0px 2px 14px 2px rgba(0, 0, 0, 0.7); 
} 

しかし、画面のサイズを縮小するとき、今あなたは、別の問題がある、navbarの右側の部分は、画像を落ちます！私の例では、containerクラスをcontainer-fluidに変更した後、を少し大きくするためにdiv.rowを追加しました。それから私はnavbarを崩壊させるために@ media-queriesを変更しました。 containerクラスだけが必要な場合は、@ media-queriesでmax-widthと再生してください。

JSFiddle-example