HTML, Bootstrap 3: curved bottom brand navbar - html

Question

I want to make a NavBar using Bootstrap 3 that looks like this:
However, I'm can't seem to get the rounded brand logo in the center, heres the current result:
The codes for my current navbar is like so:
<div class="container">
<div class="nav-color">
<div class="nav-wrap">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><span class="hidden-xs"></span><span class="text">Insert Image</span></li>
<li class=""><span class="hidden-xs"></span><span class="text">Insert Image</li>
<li class="logo hidden-xs"><img alt="Insert Image Logo" src=""></li>
<li class=""><span class="hidden-xs"></span><span class="text">Insert Image</span></li>
<li class=""><span class="hidden-xs"></span><span class="text">Insert Image</span></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
I'm not sure how i can round the bottom of the logo brand while not pushing the entire section down leaving a white space in between.

Answer 1

only add some css, click run and see full page to see if this is what you want, and if it is, you need to override the style of menu hover too
.logo {
width: 120px;
height: 50px;
}
.logo a {
height: 90px;
background: yellow;
border-radius: 0 0 40px 40px;
}
.logo img {
background: green;
width: 60px;
height: 60px;
margin: 0 15px;
border-radius: 100%;
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="nav-color">
<div class="nav-wrap">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><span class="hidden-xs"></span><span class="text">Insert Image</span></li>
<li class=""><span class="hidden-xs"></span><span class="text">Insert Image</li>
<li class="logo hidden-xs">
<img alt="Insert Image Logo" src="">
</li>
<li class=""><span class="hidden-xs"></span><span class="text">Insert Image</span></li>
<li class=""><span class="hidden-xs"></span><span class="text">Insert Image</span></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>