title: Bulma navbar: how to style the menu on dropdown?
body: <p>I'm using the <a href="https://bulma.io/documentation/components/navbar/" rel="nofollow noreferrer">Bulma navbar</a>, and the function of it is really great! My question is: on smaller screens, when the navbar-menu is shown as a dropdown via clicking the burger menu - how can I style that?</p>
  
  <p>It shows up as full-width, but I'd really like to be able to have it narrower, or maybe adjust to the width of the contents.</p>
  
  <p>Here's how it looks currently:</p>
  
  <p>Closed:</p>
  
  <p><a href="https://i.stack.imgur.com/bU5bw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bU5bw.png" alt="enter image description here"></a></p>
  
  <p>Open: </p>
  
  <p><a href="https://i.stack.imgur.com/XUOgN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XUOgN.png" alt="enter image description here"></a></p>
  
  <p>For the burger menu dropdown, all of the examples on the Bulma page seem to reach the full width of the Navbar. (Though not so for dropdowns <em>within</em> the navbar).
  Does anyone know how I can make it not full-width? I mean, I can easily add <code>max-width: 50%;</code> etc on the <code>.navbar-menu</code>, but I don't know how to then make the menu div 'stick' to the right-hand side of the navbar, since it doesn't look very nice aligned to the left:</p>
  
  <p><a href="https://i.stack.imgur.com/yNcHG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yNcHG.png" alt="enter image description here"></a></p>
  
  <p>I feel like I'm missing the obvious here, if anyone can put me on the right path I'd appreciate it so much!</p>
  
  <h3>code stuff</h3>
  
  <p>My HTML looks basically exactly like the <a href="https://bulma.io/documentation/components/navbar/" rel="nofollow noreferrer">Bulma docs</a>, but I'll add it here just in case:</p>
  
  <pre><code>&lt;nav class="navbar" role="navigation"&gt;
     &lt;div class="navbar-brand"&gt;
        &lt;div class="navbar-item"&gt;
           &lt;p class="title"&gt;&lt;span&gt;title here&lt;/span&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="button navbar-burger is-active"&gt;
           &lt;span&gt;&lt;/span&gt;
           &lt;span&gt;&lt;/span&gt;
           &lt;span&gt;&lt;/span&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="navbar-menu is-active"&gt;
        &lt;div class="navbar-end"&gt;
           &lt;div class="navbar-item"&gt;
              &lt;div&gt;menu item 1&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="navbar-item"&gt;
              &lt;div&gt;menu item 2&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And just to be clear, because it's a common question, I don't have any problems with the functionality of the navbar - just wanting styling advice.</p>
  
  <h3>Update</h3>
  
  <p>Below, @sol wrote about adding <code>max-width: 50%;</code> and <code>float: right;</code> as a solution. Visually though, it isn't quite right:</p>
  
  <p>Closed (looking normal):
  <a href="https://i.stack.imgur.com/vmbpd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vmbpd.png" alt="enter image description here"></a></p>
  
  <p>Open (uh oh alignment):
  <a href="https://i.stack.imgur.com/dUWZh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dUWZh.png" alt="enter image description here"></a></p>