title: Hamburger menu dropdown on the right side
body: <p>I'm trying to position the hamburger menu on the right when I click on it, but I'm not managing to adjust the CSS for that.</p>
  
  <p>I have this <code>HTML</code> code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="navbar-header"&gt;
      &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="navbar-collapse collapse"&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="navbar-header"&gt;
          &lt;p class="navbar-text navbar-right"&gt;
          &lt;a href="#" class="navbar-link"&gt;Username&lt;/a&gt;
          &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Ad this <code>CSS</code>:</p>
  
  <pre><code>@media (max-width: 1200px) {
      .navbar-header {
          float: none;
      }
      .navbar-left,.navbar-right {
          float: none !important;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-fixed-top {
          top: 0;
          border-width: 0 0 1px;
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-nav {
          float: none!important;
          margin-top: 7.5px;
      }
      .navbar-nav&gt;li {
          float: none;
      }
      .navbar-nav&gt;li&gt;a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
      .collapse.in{
          display:block !important;
      }
  }
  </code></pre>
  
  <p>How to adjust this CSS so that the hamburger menu is on the right when clicking on it? The padding of the boxes must be appropriate to the size of the words inside it. Like this:</p>
  
  <p><a href="https://i.stack.imgur.com/yeDNO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yeDNO.png" alt="enter image description here"></a></p>
  
  <p><strong>It's okay if it overwrites the space under it.</strong></p>
  
  <p>I need a solution that uses this <code>CSS</code> code, only. See more <a href="https://www.codeply.com/go/bp/120604" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Thanks.</p>