<nav class="navbar">
  <div class="sidebar-collapse">
    <button type="button" id="sidebarCollapse" class="togglebutton btn btn-info navbar-btn"> Button </button>
  </div>
  <div class="main-logo"><a href="#" class="navbar-brand"><img class="logo" id="logo" src="http://www.placehold.it/265x100" alt="SC2 Logo"></a></div>
  <div class="small-logo"><a href="#"><img id="sc2logo" src="http://www.placehold.it/50x50"></a></div>
</nav>
.navbar {
  max-width: 1170px;
  margin: auto;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-logo {
  padding: 20px;
  flex: 1 0 0;
  text-align: center;
}
#logo {
  max-width: 265px;
  width: 100%;
  height: auto;
}
.sidebar-collapse,
.small-logo {
  width: 80px;
  padding: 10px;
}
@media screen and (max-width: 600px) {
  .sidebar-collapse,
  .small-logo {
    width: auto;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.