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>

https://jsfiddle.net/4tbf5mgc/

Current:

Desired:

I'm a little unclear on what exactly should happen, and `#quickMenu` appears to be the first row - do you have a graphic mockup of what you are trying to accomplish? — Ben, Jan 23 '21 at 03:57

webdev-dan · Accepted Answer · 2021-01-23T20:16:12.893

0

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/

edited Jan 23 '21 at 20:16

answered Jan 23 '21 at 03:52

webdev-dan

1,339
7
10

please see my edit that shows the current setup and desired setup – joym8 Jan 23 '21 at 19:07
@joym8 ok, now i got what you meant - i've extended the answer (under the line) added new solution - hope that is what you need? – webdev-dan Jan 23 '21 at 20:21
yes this is exactly what i needed. i will test in my code tomorrow! – joym8 Jan 24 '21 at 03:21
I haven't checked your jsfiddle line by line. is it exactly the same as I posted in my question? In other words, the CSS is the only thing I need to add? – joym8 Jan 24 '21 at 04:06
@joym8 yes. just that css in the answer – webdev-dan Jan 24 '21 at 21:00
I tried this in a local HTML file, outside of JSFiddle, and it's not giving the desired effect. The second row of links is left aligned. In JSFiddle the 2nd row looks justified and is responsive, which is good. – joym8 Feb 19 '21 at 15:44
Compare classes of the `
– webdev-dan Feb 22 '21 at 14:38

Bootstrap navbar two rows with second row full screen width

1 Answers1