Menu icon Foundation
RTL Issue in topbar component

 Hi to lovers of great framework foundation!

 I have a problem in creating "RTL" "Top Bar" component. I set lang="fa" dir="rtl" in main HTML file, here is my html code:

 

<div class="top-bar">
		<div class="top-bar-title">
			<span data-responsive-toggle="responsive-menu" data-hide-for="small">
				<button class="menu-icon dark" type="button" data-toggle></button>
			</span>
			<strong>عنوان سایت</strong>
		</div>
		<div class="top-bar-left">
			<ul class="menu">
				<li><input type="search" placeholder="جستجو"></li>
				<li><button type="button" class="button">Search</button></li>
			</ul>
		</div>
		<div id="responsive-menu">
			<div class="top-bar-right">
				<ul class="dropdown menu" data-dropdown-menu>
					<li><a href="#">یک</a>
						<ul class="menu vertical">
							<li><a href="#">یک</a></li>
							<li><a href="#">دو</a></li>
							<li><a href="#">سه</a></li>
						</ul></li>
					<li><a href="#">دو</a></li>
					<li><a href="#">سه</a></li>
				</ul>
			</div>
		</div>
	</div>

and here is output:

 

What is mising? site title is in left side! Is this a bug?

rtltop bar

 Hi to lovers of great framework foundation!

 I have a problem in creating "RTL" "Top Bar" component. I set lang="fa" dir="rtl" in main HTML file, here is my html code:

 

<div class="top-bar">
		<div class="top-bar-title">
			<span data-responsive-toggle="responsive-menu" data-hide-for="small">
				<button class="menu-icon dark" type="button" data-toggle></button>
			</span>
			<strong>عنوان سایت</strong>
		</div>
		<div class="top-bar-left">
			<ul class="menu">
				<li><input type="search" placeholder="جستجو"></li>
				<li><button type="button" class="button">Search</button></li>
			</ul>
		</div>
		<div id="responsive-menu">
			<div class="top-bar-right">
				<ul class="dropdown menu" data-dropdown-menu>
					<li><a href="#">یک</a>
						<ul class="menu vertical">
							<li><a href="#">یک</a></li>
							<li><a href="#">دو</a></li>
							<li><a href="#">سه</a></li>
						</ul></li>
					<li><a href="#">دو</a></li>
					<li><a href="#">سه</a></li>
				</ul>
			</div>
		</div>
	</div>

and here is output:

 

What is mising? site title is in left side! Is this a bug?