title: Boostrap 4 Navbar Collapse Menu Right Align
body: <p>I am using Bootstrap 4 and I am trying to make the menu that pops up by clicking the collapse button to open on the right side instead of the left. I have tried using "ml-auto" on the "ul" element. The navbar items are correctly on the right side when it isn't collapsed. When it is collapsed, the button is correctly on the right side but the menu pops up on the left. I have also tried putting "ml-auto" in the div as well but that didn't work. Here is my HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark fixed-top"&gt;
      &lt;a class="navbar-brand" href="#home"&gt;&lt;img id="logo" class="no-opacity" src="content/white-logo.png"&gt;&lt;/a&gt;
      &lt;button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 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" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#home"&gt;&lt;i class="fa fa-home fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#about"&gt;&lt;i class="fa fa-user fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#projects"&gt;&lt;i class="fa fa-folder-open fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Projects&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#experience"&gt;&lt;i class="fa fa-briefcase fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Experience&lt;/a&gt;
              &lt;/li&gt;       
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#contact"&gt;&lt;i class="fa fa-envelope fa-fw" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp;Contact&lt;/a&gt;
              &lt;/li&gt;                     
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I feel like there is a simple solution but I can't figure it out. Thanks for the help!</p>