Zurb's foundation 3.2.5 top-bar and toggle-topbar

Question

My website is RTL website. I downloaded zurb-foundation 3.2.5 customized with rtl direction. However, The website's navigation using sticky fixed top-bar, renders navigation links in revers order, as shown in the screen shot: enter image description here

The order should be as the following screen shot: enter image description here

To obtain the second, desired, screen shot, I tried to set the following in the app.css:

.top-bar ul>li {
float: right;
}

The problem here appears with toggle-topbar in small screen where the toggle-topbar arrow is rendered only before expanding the menu, after that it disappeared under the first item. Look at the following screen shots:

enter image description here

The above screen shot shows the navigation bar on small screen when the navigation items are ordered correctly in the larg screen using the CSS described above. It shows no toggle arrow!

The following scrren shot shows the correct toggle-bar but with incorrect order on the large screen: enter image description here

The following is the HTML code used to generate this navigation:

           <div class="contain-to-grid fixed">
<nav class="top-bar">
<ul>   
  <li class="name"><h1><a href="#"></a></h1></li>
   <li class="toggle-topbar"><a href="#"></a></li>  
</ul>
  <section>
    <ul class="left">    
  <li class = "active"><a href="/quran/" class="selected"><img src="/quran/img/home.png" alt="" />الرئيسية</a></li>
  <li class = ""><a href="/quran/contacts" class=""><img src="/quran/img/contact.png" alt="" />اتصل بنا</a></li>
  <li class = ""><a href="/quran/pages/about" class=""><img src="/quran/img/about.png" alt="" />عن الموقع</a></li>
    </ul>
    <ul class="right">
  <li class="">  
<div class="row collapse">
  <form controller="qurans" class="" id="QuranSearchForm" method="get" action="/quran/search">  <div class="nine mobile-three columns">
              <input name="q" type="text" id="QuranQ" title="بحث!" class="inline" placeholder="كلمات البحث..." value="" />  </div>
  <div class="three mobile-one columns">
                <a href="#" id="searchbutton" class="button expand postfix" title="بحث!" >بحث!</a>
</div>
  </form>
</div>              
  </li>
</ul>
  </section>
</nav>
 </div>

The most strange behavior in this issue: When I try to change .top-bar ul>li float property from the inspect element of Google chrome in foundation.min.css properties list related with the item and change the float to be right, it works fine in both side (The order becomes correct in large screen and the toggle arrow appears for expand and shrink the menu in small screen)!!!

Live demo could be found in this link, but notice in the life demo the search box is found on the left. i.e not like the screen shot.

SaidbakR SaidbakR · Accepted Answer · 2013-04-03T15:02:06

Finally I got the solution which depends on @media query. I've done the following at app.css:

.top-bar ul>li{
  float:right;  
}
@media only screen and (max-width: 940px) { .top-bar ul>li{
  float:none;  
}

}

In the above solution I used @media to cancel the float:right in the case of small screen. View the live demo from this link.

Zurb's foundation 3.2.5 top-bar and toggle-topbar

1 Answers