Foundation 5 topbar - отключить сбой меню JS на мобильном телефоне

Question

Можно ли отключить поведение по умолчанию верхнего бара, чтобы свернуть на мобильном устройстве? У меня есть меню левой руки и меню правой руки. Я хочу, чтобы меню правой руки было одинаковым на всех размерах экрана, и НЕ хотите, чтобы он рухнул на мобильном устройстве/планшете.

Итак, у настольной версии есть несколько пунктов меню слева, а справа - три значка, каждый с выпадающим списком. Я хочу, чтобы меню правой руки выглядело точно так же на мобильном телефоне, меню левой руки рухнет, как обычно.

Это то, что я хочу добиться на мобильный:

И это JS скрипку: http://jsfiddle.net/z9d6jh8n/ показывает, насколько близко я получил.

Я пытался понять это в течение нескольких недель. Может ли кто-нибудь помочь?

оригинальный код:

<nav class="top-bar" data-topbar > 
     <ul class="title-area"> 
      <!-- Title Area --> 
      <li class="name">&nbsp;</li> 
      <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li> 
     </ul> 
     <section class="top-bar-section"> 
      <!-- main nav section --> 
      <ul class="left"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Contact</a></li> 
       <li class="has-dropdown"><a href="#">Links</a> 
        <ul class="dropdown"> 
         <li><a href="#" class="">Dropdown Level 1</a></li> 
         <li><a href="#">Dropdown Option</a></li> 
         <li><a href="#">Dropdown Option</a></li> 
        </ul> 
       </li> 
      </ul> 
      <!--Language, account, currency section--> 
      <ul class="right"> 
       <li class="has-dropdown" id="account"> 
        <a href="#" class="top-bar-colour1"><i class="fi-en"></i></a> 
        <ul class="dropdown"><li><a href="#">Languages</a></li></ul> 
       </li> 
       <li class="has-dropdown" id="basket"> 
        <a href="#" class="top-bar-colour2"><i class="fi-dollar"></i></a> 
        <ul class="dropdown"><li><a href="#">Currency</a></li></ul> 
       </li> 
       <li class="has-dropdown" id="currency"> 
        <a href="#" class="top-bar-colour3"><i class="fi-lock medium"></i></a> 
        <ul class="dropdown"><li><a href="#">Login</a></li></ul> 
       </li> 
      </ul> 
     </section> 
    </nav> 

Answer 1

Прежде всего добавить следующие CSS для переопределения foundation.css:

.top-bar-section ul { 
    width: auto !important; 
    height: auto !important; 
    display: inline !important; 
} 

.row:before, .row:after { 
    content: " " !important; 
    display: table !important; 
} 

.top-bar-section ul li { 
    float: left !important; 
} 

.top-bar-section .has-dropdown > a:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    border: inset 5px; 
    border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent; 
    border-top-style: solid; 
    margin-top: -2.5px; 
    top: 22.5px; 
} 

.top-bar-section .has-dropdown > a { 
    padding-right: 35px !important; 
} 

.top-bar-section .right li .dropdown { 
    left: auto !important; 
    right: 0 !important; 
} 

.top-bar-section .dropdown { 
    left: 0 !important; 
    top: auto !important; 
    background: transparent !important; 
    min-width: 100% !important; 
} 

.top-bar-section li.active:not(.has-form) a:not(.button) { 
    padding: 0 15px !important; 
    line-height: 45px !important; 
    color: white !important; 
    background: #008cba !important; 
} 

.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown { 
    display: block !important; 
    position: static !important; 
    height: auto !important; 
    width: auto !important; 
    overflow: visible !important; 
    clip: auto !important; 
    position: absolute !important; 
} 

Затем вам нужно изменить свою разметку HTML.

В вашем FIDDLE у вас есть . Измените его на ul.right и положите его из ul.left.

Смотрите это DEMO

Answer 2

Добавьте это в CSS:

nav.show-for-small .right li { float: left; } 
nav.show-for-small .small-6 { width: auto; } 

.top-bar-section li:not(.has-form) a:not(.button) { 
    padding: 0 30px 0 15px; 
    line-height: 45px; 
} 
.top-bar-section .has-dropdown > a:after { 
    border: inset 5px; 
    border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent; 
    border-top-style: solid; 
    margin-top: -2.5px; 
} 

Вот Fiddle http://jsfiddle.net/4gp2hojw/