Floating-Logo über Navigationsleiste mit innerem Schatten im Banner - Bootstrap

Question

Was sollte der richtige Weg sein, um folgendes mit Bootstrap zu implementieren?

Das Logo ‚kommt‘ von der Navigationsleiste und erstreckt sich über die Banner. Banner hat inneren Schatten und hinter dem die Bilder rotieren sollten. Die Navigation sollte in einer typischen Bootstrap-Mode kollabieren, wenn sie reaktionsfähig ist.

Bisher habe ich das Logo in der Mitte zu bringen, in der Lage und haben die zweiteilige Navigation Zusammenbruch mit folgenden:

<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/

(Bitte erweitern Sie das Ausgabefeld in JSFiddle, um die normale Navigation anzuzeigen.

Jetzt bleibt die Frage über den Schatten und wie man Logo das Banner überlappen lässt.

Das Layout ist auf eine feste Breite eingestellt, mein nächster Versuch ist also die absolute Positionierung. Aber dafür muss Banner vor der Navigation in HTML kommen, was nicht richtig klingt.

Answer 1

Um Logo Überlappung Banner zu machen, müssen Sie Eigenschaften position und z-index zu Bild der Mutter hinzuzufügen:

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

    position: relative; 
    z-index: 2; 
} 

Dann müssen Sie die Bildgröße zu erhöhen, um es zu machen gleiche mit der Größe der Eltern:

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

Und make image circle, können Sie border-radius: 50% hinzufügen, ich habe gerade Bootstrap-Klasse img-circle verwendet.
Um das Bild zu zentrieren, habe ich die Klasse text-center für div.collapse (es ist navbar-brand Eltern) verwendet. Dann, um Schatten zu machen für navbar und logo I Green Vorschlag verwendet haben, dankt ihm:

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

Aber jetzt haben Sie ein anderes Problem, wenn der Bildschirm Größe, rechten Teil des navbar reduzieren hinfällt Bild! In meinem Beispiel habe ich container Klasse zu container-fluid geändert und dann div.row hinzugefügt, um navbar ein bisschen größer zu machen. Dann habe ich @ media-queries für kollabierende navbar geändert. Wenn Sie nur container Klasse benötigen, spielen Sie einfach mit max-width in @ Media-Abfragen, um es zu erhöhen.

JSFiddle-example