Logo örtüsüz navbar ve atlıkarınca

Question

Web sayfamın üst kısmında bir navbar ve atlıkarınca üstüne logo koymayı deniyorum. Logonun navbarın ortasına oturmasını sağlayabilirim, ancak navbardan daha büyük ve üstündeki atlı karıncaya nasıl yer açacağını anlayamıyorum.

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

Ve burada ben şimdiye kadar

<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

ne yapardım nav konteyner ve pozisyon onu mutlak logo ayrıdır sahip kod benim biraz. Belki bu https://jsfiddle.net/qdo9mqze/2/ gibi bir şey, onun kaba bir taslak ama sen fikir edin. Tasarımınızı çoğaltmak için bir sınır alt/üst ya da karusel veya nav verin.

Not: şimdi benim taslak cevap ile ilgili herhangi bir güncelleme ....

<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; 
}