Bulma navbar: how to style the menu on dropdown? - css

Question

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:
Open:
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:
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):
Open (uh oh alignment):

Answer 1

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>

Answer 2

You can try the styling below:
.navbar {
position:relative;
}
.navbar-end {
position:absolute;
left:50%;
}
.navbar-menu {
max-width:50%;
}
This way ".navbar" will be positioned relative to its current position which will allow ".navbar-end" to be positioned in relation to ".navbar" as one of its descending children elements ("position:absolute" positions the element in relation to its nearest positioned ancestor). You may have to tweak the left % if it doesn't fit exactly and also specify either top or bottom offsets if the menu items get displaced vertically.