Vakfı 5 üst bar menüsü iki satır

Question

I (v5.5.3 yazılma sırasında itibariyle son) Foundation 5 kullanıyorum sonları her öğe için. Temel olarak: sayfa genişliği [640px] 'den fazla ve [828px]' den küçük değilse, üst çubuk menüsü iyi çalışır! screenshot of broken top-bar menu

benim sorununu gösteren bir Fiddle hazırlanan:

daha iyi sorunu göstermek için bir ekran görüntüsü yarattı. ( https://jsfiddle.net/sLk0jf4L/146/)

Üst-Bar HTML: pozisyon simgelere

<div class="contain-to-grid"> 
    <nav class="top-bar" data-topbar role="navigation" data-options="'Back'"> 
     <ul class="title-area"> 
      <li class="name"> 
       <h1><a href="#">My super homepage</a></h1> 
      </li> 
      <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
      <!-- Left Nav Section --> 
      <ul class="left"> 
       <li class="active"> 
        <a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span>&nbsp; Exclusive goods</a> 
       </li> 
       <li class=""> 
        <a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span>&nbsp; New arrivals</a> 
       </li> 
       <li class=""> 
       <a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span>&nbsp; About</a> 
       </li> 
      </ul> 

      <!-- Right Nav Section --> 
      <ul class="right"> 
       <li class="has-dropdown"> 
        <a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span>&nbsp;&nbsp; Choose language</a> 
        <ul class="dropdown"> 
         <li><a href="#">Language 1</a></li> 
         <li class="active"><a href="#">Language 2</a></li> 
         <li><a href="#">Language 3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </section> 
    </nav> 
</div> 

Ek CSS

span.menu-item 
{ 
    font-size:1.25rem; 
    font-weight:500; 
    line-height:1.25rem; 
} 

a.link-item-new span.menu-item, 
a.link-item-exclusive span.menu-item 
{ 
    position:relative; 
    top:0.1rem; 
} 

a.link-item-about span.menu-item 
{ 
    position:relative; 
    top:0.15rem; 
} 

a.link-item-flag span.menu-item 
{ 
    position:relative; 
    top:0.2rem; 
} 

Ne CSS Bu kırılmasına kaldırmak için uygulamak gerekir kurallar? Eğer menü sadece frenleme yerine hamburger simgesi olarak gösteriliyorsa iyi olurdu.

Zaman ayırdığınız için teşekkür ederiz.

Answer 1

Ben .lang-text bir sınıf ile "Dil seçin" metnin etrafında bir span yüzden @media sorguları kullanarak içeriği manipüle edebilir ekledi daki html hafif bir değişiklik ettik yaptık.

Buradaki fikir, görünüm boyutu kırılma noktasına ulaştığında, yalnızca "Dil seç" metni gizlenir ve bayrak simgesi (ve bununla birlikte açılan seçenekler) korunur.

Html:

<div class="contain-to-grid"> 
    <nav class="top-bar" data-topbar role="navigation" data-options="'Back'"> 
    <ul class="title-area"> 
     <li class="name"> 
     <h1><a href="#">My super homepage</a></h1> 
     </li> 
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
     <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
    </ul> 

    <section class="top-bar-section"> 
     <!-- Left Nav Section --> 
     <ul class="left"> 
     <li class="active"> 
      <a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span>&nbsp; Exclusive goods</a> 
     </li> 
     <li class=""> 
      <a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span>&nbsp; New arrivals</a> 
     </li> 
     <li class=""> 
      <a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span>&nbsp; About</a> 
     </li> 
     </ul> 

     <!-- Right Nav Section --> 
     <ul class="right"> 
     <li class="has-dropdown"> 
      <a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text">&nbsp;&nbsp; Choose language</span></a> 
      <ul class="dropdown"> 
      <li><a href="#">Language 1</a></li> 
      <li class="active"><a href="#">Language 2</a></li> 
      <li><a href="#">Language 3</a></li> 
      </ul> 
     </li> 
     </ul> 
    </section> 
    </nav> 
</div> 

@media sorguları:

@media only screen and (min-width: 40em) { 
    a.link-item-flag span.lang-text { 
    display: none; 
    } 
} 

@media only screen and (min-width: 46.5em) { 
    a.link-item-flag span.lang-text { 
    display: inline-block; 
    } 
} 

Updated Fiddle