財団5トップバーメニューは、私は（v5.5.3執筆時点での最新）財団5を使用しています二行

Question

に壊れます各要素について 基本的に：ページ幅 が[640px]以上で[828px]未満でない限り、トップバーメニューは正常に機能します！

私はより良い問題を説明するためのスクリーンショットを作成しました： screenshot of broken top-bar menu

私は私の問題を説明するためのフィドルを用意しました。 （https://jsfiddle.net/sLk0jf4L/146/）

トップバー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> 

追加のCSSの位置アイコンに

私はこの破損を削除する適用する必要がどのような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; 
} 

？ メニューがブレーキアップの代わりにハンバーガー アイコンとして表示されても問題ありません。

あなたの時間と知識をありがとうございます。

Answer 1

私はクエリを使用してコンテンツを操作できるように、.lang-textのクラスで「言語を選択」テキストの周りにspanを追加しましたので、あなたのHTMLを少し修正しました。

ビューポートのサイズがブレークポイントに達すると、フラグアイコン（およびそのドロップダウンオプション）を保持して、「言語の選択」テキストだけが非表示になります。

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クエリ：

@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