My experience with SASS is still in its infancy, and I have encountered some issues. According to the documentation, I should make changes to _top-bar.scss by adding the line: $topbar-menu-icon-position: $default-float; (rather than $opposite-direction;).
However, this solution does not seem to be effective - the hamburger menu icon remains aligned to the right on mobile devices.
Although I believe the problem lies with the SASS code and not the HTML, here is the HTML code just in case:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">Name</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
</nav>