Vertical-Alignment of Image in Navbar - html

Question

I have a website that I am developing utilizing the Bootstrap 4 framework. I am trying to create a navbar with the navbar-brand in the center. I was able to place the navbar-brand in the center with a navbar-nav on each side of the navbar-brand. Please find below the code that I utilized. My issue is that the navbar-brand is vertically aligned in the center of the navbar.
How can I align the navbar-brand to the bottom of the navbar and have the excess stick out at the top of the navbar without adjusting the margins?
#hdrContainer {
background-color: #0a3782;
}
.container {
background-color: inherit;
}
#tblHeader {
width: 100%;
/*font-size: .8125rem;*/
font-size: 1rem;
text-align: right;
color: #ffffff;
font-weight: bold;
}
#tblHeader tr {
height: 50px;
}
.breadcrumb {
background-color: inherit;
margin-bottom: initial;
font-weight: bold;
}
.breadcrumb .active {
color: inherit;
}
#socialbrand {
text-align: right;
}
#mainNavbar {
background-color: gray;
}
#mainNavbar .container .navbar {
position: relative;
z-index: 0;
max-height: 40px;
}
.navbar-brand {
position: relative;
z-index: 1;
margin-right: initial;
}
.form-control {
width: 200px;
}
.btn-outline-navy {
color: #f6b40e;
background-color: transparent;
background-image: none;
border-color: #f6b40e;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="hdrContainer" class="container-fluid">
<div class="container">
<table id="tblHeader">
<tbody>
<tr>
<td>
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Commander, Naval Surface Force, US Pacific</li>
</ol>
</nav>
</td>
<td id="socialbrand" style="display: block; padding: .75rem 1rem;">Follow Us |
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-flickr" aria-hidden="true"></i>
<i class="fa fa-wordpress" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td colspan="2">
<nav class="navbar navbar-light">
<form class="form-inline">
<input class="form-control form-control-sm ml-auto mr-sm-2 float-right" placeholder="Search" aria-label="Search" type="search">
<button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="mainNavbar" class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- Just an image -->
<a class="navbar-brand mr-auto ml-auto" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="75" height="75">
</a>
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

Answer 1

The solution below makes use of the various flexbox utility classes available in Bootstrap, described in detail in the docs.
The .navbar-brand got wrapped into <div id="logo"> in order to set it's positioning to absolute, and it's bottom position to 0. That pushes down the logo container to the bottom of the navbar.
Additionally, I've added the .d-none .d-lg-block classes in order to hide the logo when the menu is collapsed.
Available as a CodePen as well.
/* Pushing logo to bottom */
#logo {
position: absolute;
bottom: 0;
}
/* Basic styling to resemble to source */
.navbar {
background-color: gray;
}
#header {
height: 100px;
color: white;
background-color: #0a3782;
display: flex;
justify-content: center;
align-items: center;
}
<div id="header">[header placeholder]</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<div id="logo" class="d-none d-lg-block">
<a class="navbar-brand m-0" href="#">
<img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
</a>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Item 1</a>
<a class="nav-item nav-link" href="#">Item 2</a>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>