Responsive HTML5 navbar with centered logo "popping" out
<p>I'm trying to build a responsive navbar like in the picture below for the desktop version and, in the mobile version, I want it to transform into a drop-down burger-menu. I also want the logo to "pop" outside of it and cover a bit of the content under the navbar. </p>

<p><a href="https://i.stack.imgur.com/Z2xYn.png" rel="nofollow noreferrer">navbar with logo "popping" out</a></p>

<p>I'm a beginner so I was thinking about modifying a bootstrap navbar to suit my needs but I have the following struggles:</p>

<ol>
<li>I don't know how to center the content and keep it responsive (I don't mind if the logo is visible inside the burger-menu in the mobile version).</li>
<li>I don't know how to make the logo "pop" outside the navbar and cover a bit of the content under it</li>
<li>I haven't got to the part that displays and colors in red the active tab but I need some help for that too</li>
</ol>

<p>I would really appreciate if someone has the time to read this post and give me a hand or some advice.</p>

<p>Below you can see my code so far but I'm not sure how good it is.
I wish you all a good day :)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#menu-wrapper {
  background: rgba(0,0,0,0.4) !important;
}


#burger-menu {
  color: #fbf9ff;
}

#nav-container {
text-align: center;
margin:0 auto;
display: inline-block;
position:fixed;
width:100%;
height:15%;
background:#c73a30;
}
.logo{
  top:-65px !important;
  height:150px !important;
  line-height:150px;
  overflow:hidden;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
    &lt;title&gt;navbar&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;


&lt;section id="nav-container"&gt;
  &lt;nav id="menu-wrapper" class="navbar navbar-fixed-top navbar-dark bg-inverse"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button id="burger-menu" class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false"&gt;
              &amp;#9776;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-toggleable-xs pull-sm-right" id="navbar"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#about-me"&gt;COMEDIANS&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#web-development"&gt;EVENTS&lt;/a&gt;
              &lt;/li&gt;
              &lt;div class="logo"&gt;
                &lt;img src="http://www.battleoftastings.com/wp-content/uploads/2013/03/seafood-placeholder150x150px.png"/&gt;
              &lt;/div&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#gallery"&gt;GET IN TOUCH&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#gallery"&gt;GALLERY&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
&lt;/section&gt;



&lt;script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;/body&gt;</code></pre>
</div>
</div>
</p>