<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.