Foundation 5 top-bar menu (with icons) breaks in two lines

Question

I am using Foundation 5 (latest, as of time of writing: v5.5.3)

I have set up top-bar menu with some icons for each element. Basically: top-bar menu works fine unless page width is more than [640px] and less than [828px]!

I created a screenshot to better illustrate the problem: screenshot of broken top-bar menu

I prepared a Fiddle illustrating my problem. ( 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>

Additional CSS to position icons

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

What CSS rules I need to apply to remove this breakage? It would be fine if menu just showed up as hamburger icon instead of braking up.

Thank you for your time and knowledge.

Answer 1

I've made a slight modification to your html in that I've added a span around the "Choose language" text with a class of .lang-text so I can manipulate the content using @media queries.

The idea is that when the viewport size reaches the breaking point, only the "Choose language" text is hidden, retaining the flag icon (and the dropdown options with it).

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

@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