Menu icon Foundation
grid on small and medium windth reduction problem

Hello everyone.
I got pretty simple trouble.

<div id="div-menu" class="fixed show-for-large-up">
  <div id="div-menu-inner" class="row">
    <div class="small-3 columns">
        <a href="/" style="float:right;"><img src="<%= image_path('logo.png') %>"></a>
    </div>
    <div class="small-4 columns">
      <ul class="menu-button-group">
        <li><a class="menu-button" href="<%= about_path %>"></a></li>
        <li><a class="menu-button" href="<%= menu_path %>"></a></li>
        <li><a class="menu-button" href="<%= delivery_path %>"></a></li>
        <li><a class="menu-button" href="#div-menu"></a></li>
      </ul>
    </div>
    <div class="small-5 columns">
      <ul class="login-cart-group" style="float:left;">
        <li><a class="login-button" href="#div-menu" ></a></li>
        <li><a id="cart-count" class="cart-button" href="<%= cart_path %>" ></a></li>
      </ul>
    </div>
  </div>
</div>
            

         

When i resize window, changing width to small values(aprx 1100-1200), my "li" elements moves to next row.
But there is free space to the left logo and to the right of login-cart group.
How to make this grid collapse free space first?

columnsRowspositioning

Hello everyone.
I got pretty simple trouble.

<div id="div-menu" class="fixed show-for-large-up">
  <div id="div-menu-inner" class="row">
    <div class="small-3 columns">
        <a href="/" style="float:right;"><img src="<%= image_path('logo.png') %>"></a>
    </div>
    <div class="small-4 columns">
      <ul class="menu-button-group">
        <li><a class="menu-button" href="<%= about_path %>"></a></li>
        <li><a class="menu-button" href="<%= menu_path %>"></a></li>
        <li><a class="menu-button" href="<%= delivery_path %>"></a></li>
        <li><a class="menu-button" href="#div-menu"></a></li>
      </ul>
    </div>
    <div class="small-5 columns">
      <ul class="login-cart-group" style="float:left;">
        <li><a class="login-button" href="#div-menu" ></a></li>
        <li><a id="cart-count" class="cart-button" href="<%= cart_path %>" ></a></li>
      </ul>
    </div>
  </div>
</div>
            

         

When i resize window, changing width to small values(aprx 1100-1200), my "li" elements moves to next row.
But there is free space to the left logo and to the right of login-cart group.
How to make this grid collapse free space first?

Karl Ward over 5 years ago

Got a link? Hard to guess what might be happening ...