html - Bootstrap navbar two rows with second row full screen width

Question

I'm working on a responsive 2-row menu with brand logo. So far I have been able to make this using this SO answer but not sure how to make the second row in this menu full width. Currently the second row stops at the brand logo.

I'm trying to get the second row (#quickMenu) to stretch all the way to the left side of window. Tried several things on this element but it just does not go beyond the enclosing flex-column parent.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md fixed-top nav-wrapper">
            <a class="navbar-brand" href="/">
                <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="80" height="30" alt="">
            </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>
                            </div>
                        </div>
                    </div>
                    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linka'>LinkA</a></div>
                    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linkb'>LinkB</a></div>
                    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linkc'>LinkC</a></div>
                    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='/linkd'>LinkD</a></div>
                    <div class="nav-item mr-2"><a class="nav-link text-dark font-weight-bold" role="link" aria-haspopup="false" href='linke'>LinkE</a></div>
                </div>
                <div id="mainMenu" class="navbar-nav w-100 d-flex flex-row-md flex-column-sm mb-md-1 mt-md-0 mb-3 mt-2 border-bottom border-left border-top border-right border-danger">
                        <div class="nav-item flex-fill">
                            <a class="nav-link text-primary font-weight-bold" 
                               href="/link1" role="link" aria-haspopup="false">
                                <span>Link1</span>
                            </a>
                        </div>
                        <div class="nav-item flex-fill">
                            <a class="nav-link text-primary font-weight-bold" 
                               href="/link2" role="link" aria-haspopup="false">
                                <span>Link2</span>
                            </a>
                        </div>
                        <div class="nav-item flex-fill">
                            <a class="nav-link text-primary font-weight-bold" 
                               href="/link3" role="link" aria-haspopup="false">
                                <span>Link3</span>
                            </a>
                        </div>
                        <div class="nav-item flex-fill">
                            <a class="nav-link text-primary font-weight-bold" 
                               href="/link4" role="link" aria-haspopup="false">
                                <span>Link4</span>
                            </a>
                        </div>
                        <div class="nav-item flex-fill">
                            <a class="nav-link text-primary font-weight-bold" 
                               href="/link5" role="link" aria-haspopup="false">
                                <span>Link5</span>
                            </a>
                        </div>
                        <div class="nav-item flex-fill">
                            <a class="nav-link text-primary font-weight-bold" 
                               href="/link6" role="link" aria-haspopup="false">
                                <span>Link6</span>
                            </a>
                        </div>
                        <div class="nav-item flex-fill">
                            <a class="nav-link text-primary font-weight-bold" 
                               href="/link7" role="link" aria-haspopup="false">
                                <span>Link7</span>
                            </a>
                        </div>
                    <div class="nav-item flex-fill">
                        <div class="google-search-form ml-lg-4 ml-md-2 ml-sm-0 small">
                            <form action="/site-search/" class="form-inline header-search" method="get">
                                <div class="form-group input-container">
                                    <input type="search" id="q" name="q" placeholder="Search the site" 
                                           class="form-control-sm border-primary" />
                                    <button type="submit" class="btn text-primary">
                                        <svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
                                            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
                                        </svg>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </nav>

question from:https://stackoverflow.com/questions/65643279/bootstrap-navbar-two-rows-with-second-row-full-screen-width

Answer 1

I'm not sure if that is what you're looking for - but to stretch the other menu just add flex-fill class to all nav-item-s within it.

Check the result here: https://jsfiddle.net/n39xpawf/

---

OK then - seem like i didn't get your idea yesterday ;) To reproduce the desired display as it is on your image just add the CSS below to absolutely position the brand-logo image for screen wider then 767px:

@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 */
  }  
}

working draft here: https://jsfiddle.net/otzLwemp/