Search code examples
cssbulma

Bulma navbar: how to style the menu on dropdown?

I'm using the Bulma navbar, 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?

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.

Here's how it looks currently:

Closed:

enter image description here

Open:

enter image description here

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 within the navbar). Does anyone know how I can make it not full-width? I mean, I can easily add max-width: 50%; etc on the .navbar-menu, 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:

enter image description here

I feel like I'm missing the obvious here, if anyone can put me on the right path I'd appreciate it so much!

code stuff

My HTML looks basically exactly like the Bulma docs, but I'll add it here just in case:

<nav class="navbar" role="navigation">
   <div class="navbar-brand">
      <div class="navbar-item">
         <p class="title"><span>title here</span></p>
      </div>
      <div class="button navbar-burger is-active">
         <span></span>
         <span></span>
         <span></span>
      </div>
   </div>
   <div class="navbar-menu is-active">
      <div class="navbar-end">
         <div class="navbar-item">
            <div>menu item 1</div>
         </div>
         <div class="navbar-item">
            <div>menu item 2</div>
         </div>
      </div>
   </div>
</nav>

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.

Update

Below, @sol wrote about adding max-width: 50%; and float: right; as a solution. Visually though, it isn't quite right:

Closed (looking normal): enter image description here

Open (uh oh alignment): enter image description here

Solution

  • You can create this layout by applying some flexbox properties to .navbar-menu and its container.

    You'll need to wrap these rules in a media query to ensure it doesn't affect the menu at larger screen sizes.

    fiddle

    @media screen and (max-width: 1023px) {
  .navbar {
    display: flex;
    flex-wrap: wrap;
  }
  .navbar-brand {
    min-width: 100%;
  }
  .navbar-menu {
    margin-left: auto;
    min-width: 50%;
  }
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar" role="navigation">
  <div class="navbar-brand">
    <div class="navbar-item">
      <p class="title"><span>title here</span></p>
    </div>
    <div class="button navbar-burger is-active">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="navbar-menu is-active">
    <div class="navbar-end">
      <div class="navbar-item">
        <div>menu item 1</div>
      </div>
      <div class="navbar-item">
        <div>menu item 2</div>
      </div>
    </div>
  </div>
</nav>
<div class="section content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, provident quasi nulla fugiat libero nemo tempora adipisci quisquam voluptatibus blanditiis suscipit cupiditate obcaecati numquam, odio eligendi repellendus! Commodi, mollitia, modi!</p>
</div>