Menu icon Foundation
How can I do an icon-nav bar with labels?

OK, I have spent the better part of a week searching for an answer to this.  I want to do what appears to have been pretty common in Foundation 5. I would like to do a top navigation bar with icons and with a label under the icon, just as you see in this Foundation 5 tutorial with the icon-bar class:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/icon-bar.html

It appears the icon-bar nav class no longer exists in Foundation 6.

I've tried many variations on a theme that I've found in various forums and can't get it to work. 

Is there some resource somewhere that shows how to make this work in Foundation 6 where the icons are centered above the label and the whole thing is a clickable button.  I also, of course, want it mobile responsibe so that if the screen gets bigger the nav bar narrows and widens appropirately. Ultimately when I span out beyond tablet size I will use a regular PC nav bar.  

This seems like such a basic thing but despite trying at least a dozen different variations on this theme that I've found, I can't get it to work.

Here is the closest I've gotten (wide screen):

 

Here it is again on a narrow screen:

 

So it is responsive. But You'll notice that the icons are not centered.  Here is the code I used (can't remember anymore where I cobbled it together from) to generate it:

<nav class="mobile-app-icon-bar five-up" role="navigation">
  <a class="item" href='http://www.daledietrich.com' role="button" tabindex="0" aria-label="home">
     <button><i class="fi-home"></i></button>
     <label id='itemlabel1'>Home</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-torsos-all"></i></button>
     <label id='itemlabel1'>Friends</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-torso"></i></button>
     <label id='itemlabel1'>Me</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-magnifying-glass"></i></button>
     <label id='itemlabel1'>Search</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-list-thumbnails"></i></button>
     <label id='itemlabel1'>Reserves</label>
  </a>
  </nav>

Here is the CSS I used (much of it I don't understand - the webkit/flex-align stuff)

.mobile-app-icon-bar {
  background-color: black;
  color: white;
}
/*

*/
.mobile-app-icon-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  background: #fefefe;
}

.mobile-app-icon-bar button {
  cursor: pointer;
}
.mobile-app-icon-bar label {
  align-content: center;
}

.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {
  align-content: center;
  font-size: 2rem;
  max-height: 2rem;
  max-width: 2rem;
}

.mobile-app-icon-bar ul li a {
  align-content: center;
}

The above is cut & paste from various places. No doubt there is redundant CSS in there. But I am getting desparate.

Thanks..

...Dale

 

Nav bariconsmobile responsivefoundation 6

OK, I have spent the better part of a week searching for an answer to this.  I want to do what appears to have been pretty common in Foundation 5. I would like to do a top navigation bar with icons and with a label under the icon, just as you see in this Foundation 5 tutorial with the icon-bar class:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/icon-bar.html

It appears the icon-bar nav class no longer exists in Foundation 6.

I've tried many variations on a theme that I've found in various forums and can't get it to work. 

Is there some resource somewhere that shows how to make this work in Foundation 6 where the icons are centered above the label and the whole thing is a clickable button.  I also, of course, want it mobile responsibe so that if the screen gets bigger the nav bar narrows and widens appropirately. Ultimately when I span out beyond tablet size I will use a regular PC nav bar.  

This seems like such a basic thing but despite trying at least a dozen different variations on this theme that I've found, I can't get it to work.

Here is the closest I've gotten (wide screen):

 

Here it is again on a narrow screen:

 

So it is responsive. But You'll notice that the icons are not centered.  Here is the code I used (can't remember anymore where I cobbled it together from) to generate it:

<nav class="mobile-app-icon-bar five-up" role="navigation">
  <a class="item" href='http://www.daledietrich.com' role="button" tabindex="0" aria-label="home">
     <button><i class="fi-home"></i></button>
     <label id='itemlabel1'>Home</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-torsos-all"></i></button>
     <label id='itemlabel1'>Friends</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-torso"></i></button>
     <label id='itemlabel1'>Me</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-magnifying-glass"></i></button>
     <label id='itemlabel1'>Search</label>
  </a>
  <a class="item" role="button" tabindex="0" aria-label="home">
     <button><i class="fi-list-thumbnails"></i></button>
     <label id='itemlabel1'>Reserves</label>
  </a>
  </nav>

Here is the CSS I used (much of it I don't understand - the webkit/flex-align stuff)

.mobile-app-icon-bar {
  background-color: black;
  color: white;
}
/*

*/
.mobile-app-icon-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  background: #fefefe;
}

.mobile-app-icon-bar button {
  cursor: pointer;
}
.mobile-app-icon-bar label {
  align-content: center;
}

.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {
  align-content: center;
  font-size: 2rem;
  max-height: 2rem;
  max-width: 2rem;
}

.mobile-app-icon-bar ul li a {
  align-content: center;
}

The above is cut & paste from various places. No doubt there is redundant CSS in there. But I am getting desparate.

Thanks..

...Dale

 

Rafi Benkual over 2 years ago

 This is built into the Foundation menu component: http://foundation.zurb.com/sites/docs/menu.html#icons

Dale Dietrich over 2 years ago

OH sheesh!!!!

 

Thank you thank you thank you Rafi!  I can't tell you how many times I looked at that exact Doc and didn't realize it. Probably because the doc uses the same icon for all four items in the example. I was looking for the usual icon nav bar that you see in the link I included. Probably would have looked at that 100 more times and not noticed it!

To whomever is responsible for the documentation, I strongly suggest you make the icons in the example all be different so that people who are as seemingly daft as I am can find it easier! Just like it was in the documentation for Foundation 5!

Man I feel stupid!

Thanks again!

...Dale

Dale Dietrich over 2 years ago

OK, to bring this full circle, the suggested code that Rafi linked to resulted in the following:

----

The nav icons are rather tiny and not mobile ressponsive.  They didn't go as wide as the screen on large screens and the shop icon/option on the right is chopped off on mobile screen sizes.  

With the changes below I was able to get the following: 

---

The nav icons are bigger and now spread the width of the page and squeeze down nicely on a mobile page. Below are the changes I made.  First you have to add the word 'expanded' to the ul class as follows to make the icons mobile responsive:

      <ul class="menu icon-top expanded" >
        <li><a href="#"><i class="fi-torsos-all" data-toggle="offCanvasLeft"></i> <span data-toggle="offCanvasLeft">Friends</span></a></li>
        <li><a href="#"><i class="fi-torso"></i> <span>Me</span></a></li>
        <li><a href="#"><i class="fi-home"></i> <span>Home</span></a></li>
        <li><a href="#"><i class="fi-magnifying-glass"></i> <span>Search</span></a></li>
        <li><a href="#"><i class="fi-alert"></i> <span>Alert</span></a></li>
        <li><a href="#"><i class="fi-list-thumbnails"></i> <span>Shop</span></a></li>
      </ul>
    </nav>

and the following CSS enlarged the icons, made the label/span text a bit smaller and decreased the space between the icon and the label.

 

.menu > li > a {
    padding: 0.2rem .4rem;
    line-height: 1;
}
.menu.icon-top > li > a i {
  margin: 0 auto;
}

.menu i{
  font-size: 2rem;
  
}
.menu a span{
  font-size: 0.875rem;
}

And, so, below is how it now looks on a mobile screen. EXACTLY WHAT I WAS AFTER:

 

 

I hope this helps others trying to achieve the result I was after.

...Dale