title: Navbar elements collapsing one by one using Boostrap 4
body: <p>I'm not front-end dev so I find it difficult and I was tasked to create proper menu for my application. I would like to achieve design as I 'scratched' on the picture bellow.</p>
  
  <p><a href="https://i.stack.imgur.com/Q8yCV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q8yCV.png" alt="What I would like to achieve on XL, LG, &lt; LG"></a></p>
  
  <p>I find it really difficult to create such design using Boostrap 4(no JQueries allowed).
   The most important thing here, is that left hand menu MUST be responsive size of bootstrap col-2. </p>
  
  <p>So the thing is I would like to have on XL screen resolution all elements on one navigation bar, on Large resolution all elements despite left side part and search bar to be inside of collapsed menu button and search extended in the middle and on every lower resolution to collapse whole menu(leaving only logo + app name, rest inside of collapsed menu). Last part of this task is quite easy using standard collapse. But I don't have idea, how to make it look as a whole on the picture above(especially moving from xl to lg).</p>
  
  <p>Any help or tips, will be much appreciated! </p>
  
  <p>Here's what I have for now(sorry for the inconvinence with code quality if there are any).</p>
  
  <pre><code>  &lt;div class="mb-3"&gt;
      &lt;nav class="navbar navbar-expand-lg bg-white fixed-top header shadowed-element pl-0"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;a href="#" class="navbar-brand d-flex col-2 mr-1 pr-md-3"&gt;
            &lt;ng-container *ngIf="!!qweqw; then active else defaultView"&gt;&lt;/ng-container&gt;
          &lt;/a&gt;
  
          &lt;button class="navbar-toggler navbar-light d-lg-none" type="button" data-toggle="collapse"
                  data-target="#navbarsExampleDefault"
                  aria-controls="navbarsExampleDefault"
                  aria-expanded="false" aria-label="Toggle navigation"&gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse menu-item col-10" id="navbarsExampleDefault"&gt;
  
  
            &lt;div class="col-lg-8 justify-content-start logo-right-border logo-left-border"&gt;
              &lt;ul class="navbar-nav mr-3 justify-content-between"&gt;
                &lt;li class="nav-item col-5"&gt;
                  &lt;app-search-component [asdas]="(sadasdsa$ | async)" (search)="search($event)"&gt;&lt;/app-search-component&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a id="zxczczccxz" class="nav-link nav-element nav-text"
                     [routerLink]="['/', 'dasfafa', dsffdsf]"
                     routerLinkActive="active"&gt;
                    {{'menu.asdadsadsdasads' | translate}}&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a id="adsasdadsadsadsds" class="nav-link nav-element nav-text" routerLink="/adsadsadsadsasd"
                     routerLinkActive="active"&gt;
                    {{'menu.asdsdae' | translate}}&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a id="asddsadsaasd" class="nav-link nav-element nav-text" routerLink="/sdaasdasasdn"
                     routerLinkActive="active"&gt;
                    {{'menu.sdffdsdfsdfs' | translate}}&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
  
  
            &lt;div class="col-lg-4"&gt;
              &lt;ul class="navbar-nav justify-content-around"&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a id="adsadsadsads" class="nav-link nav-element nav-text" routerLink="/asddsaasdad"
                     routerLinkActive="active"&gt;
                    {{'menu.asdsadsadsa' | translate}}&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a id="admin-tab" class="nav-link nav-element nav-text" routerLink="/admin" routerLinkActive="active"&gt;
                    {{'menu.link.dfggfdgdf' | translate}}&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item dropdown mr-0 ml-2 cursor-when-over text-center prevent-wrapping"&gt;
                  &lt;div class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;
                    &lt;div class="pull-left mt-3"&gt;
                      &lt;i aria-hidden="true" class="fa fa-user fa-fw fa-lg justify-content-center"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div class="pull-right mt-2"&gt;
                      &lt;div class="text-left"&gt;
                        &lt;ul class="list-unstyled ml-1 small-font"&gt;
                          &lt;li&gt;
                            Name
                          &lt;/li&gt;
                          &lt;li&gt;
                            Super User
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li class="ml-3"&gt;
                      &lt;span class="small-font"&gt;Name Surname&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="ml-3"&gt;
                      &lt;span class="small-font"&gt;name@company.com&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="ml-3"&gt;
                      &lt;span class="small-font"&gt; ID&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="ml-3"&gt;
                      &lt;span class="small-font"&gt; Name&lt;/span&gt;
                    &lt;/li&gt;
                    &lt;li class="border-bottom"&gt;
                    &lt;/li&gt;
                    &lt;li class="m-1"&gt;
                      &lt;div class="container-fluid"&gt;
                        &lt;!--todo will need future implementation--&gt;
                        &lt;a href="#"&gt;
                          &lt;span class="pull-left mr-1"&gt;Help&lt;/span&gt;
                          &lt;span class="pull-right ml-1"&gt;&lt;i aria-hidden="true" class="fa fa-info-circle fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="m-1"&gt;
                      &lt;div class="container-fluid"&gt;
                        &lt;a href="#"&gt;
                          &lt;!--todo will need future implementation--&gt;
                          &lt;span class="pull-left mr-1"&gt;Sign Out&lt;/span&gt;
                          &lt;span class="pull-right ml-1"&gt;&lt;i aria-hidden="true" class="fa fa-sign-out fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;ng-template #defaultView&gt;
      &lt;a class="text-center" href="#"&gt;
        sdfdfssdf
      &lt;/a&gt;
    &lt;/ng-template&gt;
  
    &lt;ng-template #active&gt;
      &lt;ul class="list-inline mb-0 pl-0"&gt;
        &lt;li class="list-inline-item"&gt;
          &lt;div *ngIf="brand=='dfgdgf'"&gt;
            &lt;img src=""&gt;
          &lt;/div&gt;
          &lt;div *ngIf="brand=='fgdfgdfg'"&gt;
            &lt;img src=""&gt;
          &lt;/div&gt;
          &lt;div *ngIf="brand=='dfggfdfdg'"&gt;
            &lt;img src=""&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="list-inline-item pl-xl-3 ml-xl-2 pl-lg-0 ml-lg-1 pl-md-0 ml-md-0"&gt;
          &lt;b&gt;sasdasdaasd&lt;/b&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/ng-template&gt;
  </code></pre>
  
  <p>App is developed using Angular 5 if it's useful information.</p>
  
  <p>EDIT: I've found some JQuery code for it and people there call it <strong>Navigation priority pattern</strong> - if I find some more info I'll post it here.</p>
  
  <p>I know this question was asked already but it was <a href="https://stackoverflow.com/questions/31696225/collapse-bootstraps-navbar-symbols-to-menu-one-by-one">3 years ago and without answer</a>.</p>