Menu icon Foundation
Menu looks terrible on mobile

Am I getting something I've just built an app with F4A and when I look at it on a mobile there are no complete shrinkage of the menu or a button to expand a menu...something wrong?'

<div class="grid-frame vertical">
      <div class="grid-block shrink wrap">
        <div style="padding: 0;" class="grid-content collapse">
          <div class="menu-group">
            <div class="menu-group-left">
              <ul class="menu-bar">
                <li><a ui-sref="accueil"><strong>Les Couvres Planchers Eddy</strong></a></li>
              </ul>
            </div>
            <div class="menu-group-right">
              <ul class="condense menu-bar">
                <li><a ui-sref="accueil">Accueil</a></li>
                <li><a ui-sref="produits">Produits</a></li>
                <li><a ui-sref="equipe">Equipe</a></li>
                <li><a ui-sref="contact">Contact</a></li>
                <li><a href="/wordpress" target="_blank">Blog</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
            

         

Img 1057

Am I getting something I've just built an app with F4A and when I look at it on a mobile there are no complete shrinkage of the menu or a button to expand a menu...something wrong?'

<div class="grid-frame vertical">
      <div class="grid-block shrink wrap">
        <div style="padding: 0;" class="grid-content collapse">
          <div class="menu-group">
            <div class="menu-group-left">
              <ul class="menu-bar">
                <li><a ui-sref="accueil"><strong>Les Couvres Planchers Eddy</strong></a></li>
              </ul>
            </div>
            <div class="menu-group-right">
              <ul class="condense menu-bar">
                <li><a ui-sref="accueil">Accueil</a></li>
                <li><a ui-sref="produits">Produits</a></li>
                <li><a ui-sref="equipe">Equipe</a></li>
                <li><a ui-sref="contact">Contact</a></li>
                <li><a href="/wordpress" target="_blank">Blog</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
            

         

Img 1057
Brandon Arnold almost 5 years ago

Hey Emmanuel,
The menu bar component doesn't have some sort of auto collapsing function, like top-bar in Foundation for sites. It was an idea, that by building a truly flexible menu component we could avoid the need for a js controlled one. There are still tons of ways you can build a mobile nav, like making it a panel on smaller sizes.

Hope that helps.