Floating logo over navigation bar with inner shadow in banner - Bootstrap
<p>What should be the correct way to implement following with Bootstrap?</p>

<p><a href="https://i.stack.imgur.com/hNm6F.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hNm6F.jpg" alt="Mockup of floating logo over navigation bar with inner shadow"></a></p>

<p>The logo ‘comes out’ of the navigation bar and extends over the banner. Banner has inner shadow and behind which the images should be rotating. The navigation should collapse in a typical Bootstrap fashion when in responsive.</p>

<p>So far, I have been able to bring the logo in center and have the two-part navigation collapse with following:</p>

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

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

<p>CSS:</p>

<pre><code>.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;
}
</code></pre>

<p><a href="https://jsfiddle.net/rvnwp1xv/" rel="nofollow noreferrer">https://jsfiddle.net/rvnwp1xv/</a></p>

<p>(Please extend the output panel in JSFiddle to view normal navigation)</p>

<p><strong>Now the question remains about the shadow and how to make logo overlap the banner.</strong></p>

<p>The layout is set to fixed width, so my next attempt is to use absolute positioning. But for that banner has to come before navigation in HTML, which doesn’t sound right.</p>