Menu icon Foundation
Centered menu on large screens and vertical on small screens

Hi,

I'm new to Foundation and have spent the whole day trying to figure out how to set a responsive menu that is centred on a large screen but vertical on a small screen (when clicked on the hamburger icon). Can someone help me out? I'm sure it's something quite simple, but I just cannot figure it out!

 

My code, as it stands, is:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">

    <div class="title-bar-right">

      <button class="menu-icon" type="button" data-toggle="example-menu"></button>  

    </div>     

  </div>

 

     <div class="menu-centered" id="example-menu" data-dropdown-menu>

    <ul class="menu">

        <li><a href="#">O nas</a></li>

        <li><a href="#">Sluzby</a></li>

        <li><a href="#">Projekty</a></li>

        <li><a href="#">Kontakt</a></li>

    </ul>

  </div>

 

Thank you.

menu vertical centered

Hi,

I'm new to Foundation and have spent the whole day trying to figure out how to set a responsive menu that is centred on a large screen but vertical on a small screen (when clicked on the hamburger icon). Can someone help me out? I'm sure it's something quite simple, but I just cannot figure it out!

 

My code, as it stands, is:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">

    <div class="title-bar-right">

      <button class="menu-icon" type="button" data-toggle="example-menu"></button>  

    </div>     

  </div>

 

     <div class="menu-centered" id="example-menu" data-dropdown-menu>

    <ul class="menu">

        <li><a href="#">O nas</a></li>

        <li><a href="#">Sluzby</a></li>

        <li><a href="#">Projekty</a></li>

        <li><a href="#">Kontakt</a></li>

    </ul>

  </div>

 

Thank you.

Rafi Benkual over 2 years ago

You can add the responsive classes to the menu like this: http://codepen.io/rafibomb/pen/NdQPQZ

We teach this in our Intro to Foundation class if you want to learn it faster: http://zurb.com/university/foundation-intro

Z K over 2 years ago

 Thank you, Rafi. I would love to take your class but I'm afraid I don't have the resources at the moment. But I am aware of it and hopefully one day I will.