Looking for a way to adjust the alignment of your menu bar? Let's dive in:
https://i.sstatic.net/qThGX.png
The left "hamburger" menu expands smoothly from left to right. Everything looks good:
https://i.sstatic.net/b2cRa.png
However, the right menu also opens from left to right, which might not be ideal:
https://i.sstatic.net/1fcqO.png
If you want the right menu to align with the right edge, similar to how the left one aligns with the left edge, here's what you can do:
Check out the HTML snippet below. The CSS code is a bit lengthy, so I've provided a link for it.
<div id='header'>
<div id='headerContent'>
<div id='breadcrumbs'>
<div id='hamburger' class='headerMenu'>
<i class='fa fa-bars'></i>
<ul>
<li><a href='/'>Page</a></li>
<li><a href='/'>Whatever</a></li>
<li><a href='/'>Other stuff</a></li>
</ul>
</div> Title
</div>
<div id='login'>
<div class='headerMenu'>
<i class='fa fa-user-circle'></i>
<ul>
<li><a href='/user/logout/'>Logout</a></li>
</ul>
</div>
</div>
</div>
</div>