title: Collapsible Navbar Angular 4 Bootstrap 4
body: <p>Been struggling for a bit trying to get something working the exact way I want it. I have a Angular Universal App that has a navigation bar (vertical on top) and I want it to be responsive for mobile. I am targeting Bootstrap 4 Alpha 6 and sing ngx-bootstrap to wire it up. However no matter what I do, I cannot get all parts to work as expected.</p>
  
  <p>Here is my template file (no custom styles here)</p>
  
  <pre><code>&lt;div class="pos-f-t fixed-top"&gt;
       &lt;nav class="navbar navbar-inverse navbar-toggleable-md"&gt;
          &lt;div class="collapse navbar-collapse"&gt;
             &lt;a class="navbar-brand" routerLink=""&gt;Blog&lt;/a&gt;
             &lt;ul class="navbar-nav ml-auto mt-2 mt-md-0"&gt;
                &lt;li class="nav-item hidden-lg-down"&gt;
                    &lt;a routerLink="/blog" [routerLinkActive]="['router-link-active']" class="list-group-item"&gt;Blog&lt;/a&gt;
                &lt;/li&gt; &amp;nbsp;
                &lt;li class="nav-item"&gt;
                    &lt;a routerLink="/about" [routerLinkActive]="['router-link-active']" class="list-group-item"&gt;About&lt;/a&gt;
                &lt;/li&gt; &amp;nbsp;
                &lt;li class="nav-item"&gt;
                    &lt;a routerLink="/search" [routerLinkActive]="['router-link-active']" class="list-group-item"&gt;Search&lt;/a&gt;
                &lt;/li&gt; &amp;nbsp;
            &lt;/ul&gt;
         &lt;/div&gt;
       &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried a few SO posts as well as MISC walkthroughs in GitHub Issues, but I am not able at this time. On small viewfinders, I want there to be an icon that hides/shows the menu onclick (whether assigning a css class to a div or using something else). The issue that I am running into is that Since I am using Universal, I have no jQuery access, so I assume out of the box Bootstrap Nav will not work. Anyone who can help would be my hero.</p>