Foundation 5 Top-Bar-Menü (mit Icons) bricht in zwei Linien

Question

Ich verwende Foundation 5 (spätestens ab dem Zeitpunkt des Schreibens: v5.5.3)

Ich habe Top-Bar-Menü mit einigen Symbolen einrichten für jedes Element. Grundsätzlich: top-bar Menü funktioniert gut, es sei denn die Seitenbreite ist mehr als [640px] und weniger als [828px]!

habe ich einen Screenshot besser, das Problem zu veranschaulichen: screenshot of broken top-bar menu

ich ein Fiddle illustriert mein Problem vorbereitet. (https://jsfiddle.net/sLk0jf4L/146/)

Top-Bar 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>&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> 

Zusätzliche CSS Position Symbole

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; 
} 

Welche CSS-Regeln I anwenden müssen, um diesen Bruch zu entfernen? Es wäre in Ordnung, wenn Menü nur als Hamburger Symbol anstelle von bremsen angezeigt würde.

Vielen Dank für Ihre Zeit und Ihr Wissen.

Answer 1

Ich habe eine leichte Modifikation zu Ihrem HTML in dem macht ich habe ein span um den „Sprache wählen“ Text mit einer Klasse von .lang-text so habe ich den Inhalt @media Abfragen mit manipulieren kann.

Die Idee ist, dass, wenn die Größe des Darstellungsbereichs den Bruchpunkt erreicht, nur der Text "Choose language" ausgeblendet wird und das Flaggensymbol (und die Dropdown-Optionen damit) beibehalten wird.

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 Anfragen:

@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