title: Responsive HTML5 navbar with centered logo "popping" out
body: <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>