Logo Overlaying Navbar und Karussell

Question

Ich versuche, ein Logo oben auf einer Navbar und Karussell auf der Oberseite meiner Webseite zu setzen. Ich kann das Logo in der Mitte der Navigationsleiste finden, aber ich kann nicht herausfinden, wie ich es größer als die Navigationsleiste machen und darüber das Karussell überlagern soll.

Here's a small mockup of what I'm trying to achieve

Und hier ist mein kleines Stück Code, das ich bisher habe

<header id="myCarousel" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for Slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 1</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 2</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 3</h2> 
      </div> 
     </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="icon-next"></span> 
    </a> 
</header> 
<nav id="navbar-primary" class="navbar transparent" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> 
      <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="navbar-primary-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><img id="logo-navbar-middle" src="assets/logo-final.png" width="300" alt="Logo Thing main logo"></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Answer 1

, was ich tun würde, getrennt ist, das Logo aus dem nav Behälter und positionieren Sie es absolut. Vielleicht so etwas wie dieses https://jsfiddle.net/qdo9mqze/2/, es ist ein grober Entwurf, aber Sie bekommen die Idee. Geben Sie ihm ein paar Grenzen - oben/unten - entweder das Karussell oder das Navigationsgerät, um Ihr Design zu replizieren.

Hinweis: jetzt ist mein Entwurf wie eine Fahne ....

<div class="carousel"></div> 
<div class="logo"></div> 
<div class="nav"></div> 

    .carousel { 
    background: red; 
    height: 300px; 
    width:100%; 
    position: relative; 
} 

.logo{ 
    background: blue; 
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    position: absolute; 
    margin: 0 auto; 
    top:200px; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    z-index: 1; 
} 
.nav{ 
    background:green; 
    width:100%; 
    height: 100px; 
    position:relative; 
}