I am seeking advice on creating a single navbar with a centered brand logo that stays aligned at the top and bottom of the navbar. I want to ensure that as the brand logo grows in size, the navbar does not expand with it.
The goal is to align the bottom edge of the image with the bottom of the navbar:
#hdrContainer {
background-color: #0a3782;
}
.container {
background-color: inherit;
}
/* other CSS styles... */
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="hdrContainer" class="container-fluid">
<div class="container">
<table id="tblHeader">
<tbody>
<!-- Table content here -->
</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">
<!-- Navbar links go here -->
</ul>
<a class="navbar-brand mr-auto ml-auto" href="#">
<!-- Brand logo image -->
</a>
<ul class="navbar-nav ml-auto mr-auto">
<!-- More navbar links -->
</ul>
</div>
</nav>
</div>
</div>
</body>