2 row navbar full width
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<nav class="navbar navbar-expand-md fixed-top nav-wrapper">
<a class="navbar-brand" href="/">
<img id="brandLogo" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" class="img-fluid" width="30" height="30" alt="brand logo">
</a>
<button class="navbar-toggler mb-2 mr-2" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon">
<i class="fa fa-bars bg-primary p-2 text-white" style="font-size:28px;">
</i>
</span>
</button>
<div style="border: solid 0px red;"
class="collapse navbar-collapse flex-column align-items-start ml-lg-2 ml-0"
id="navbarCollapse">
<div style="border:solid 0px green;" id="quickMenu"
class="navbar-nav w-100 d-flex flex-md-row-reverse flex-sm-column-reverse pr-md-5">
<div class="nav-item" style="border: solid 0px blue" id="ctaMenu">
<div class="d-flex">
<div class="nav-item mr-3">
<a href='/calendar' title="Calendar"
class="text-dark nav-link mb-sm-2 font-weight-bold py-0">
<i class="fa fa-calendar"></i></a>
</div>
<div class="nav-item">
<a href='#' title="Apply"
class="font-weight-bold btn btn-danger px-4 text-uppercase text-white">Apply</a>
...
CSS
@media (min-width: 768px){
.navbar.navbar-expand-md .navbar-brand {
position: absolute;
z-index: 1;
top: 5px; /* whatever your logo size will be - adjust positioning here.. */
}
#quickMenu {
padding-left: 3rem; /* ...and left padding here leave enough space for brand-logo */
}
}