Menu icon Foundation
Vertical menu to Top bar in mobile

Hello

I have my navigation vertical in Large screen and want it to change to a top bar in mobile.

I have used media queries to change the menu. I have two menus in my Html....not sure if that't right...

It works, but the top-bar is not collapsed ( it is vertical ) in mobile.

 

Does anybody have a suggestion what i have to do?

 

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blattwerk - blätter, blumen &amp; mehr</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>

    
  <section class="main">
    <div class="wrap">

        <div class="row">

                    <div class="medium-10 large-10  medium-push-1 columns" id="">

                        <div class="overlay-container">

                          <img class="bg" src="img/bg_img/bg_main.gif">
                          <img class="bg_mobile" src="img/bg_img/bg_mobile.gif">


                                  <div class="row overimage">

                                  <div class="medium-6 large-6 columns" id="red">


                                                  <ul class="menu vertical" id="menufont">
                                                    <li><a href="#">der laden</a></li>
                                                    <li><a href="#">das angebot</a></li>
                                                    <li><a href="#">die fotogallerie</a></li>
                                                    <li><a href="#">blattwerkerinnen</a></li>
                                                    <li><a href="#">öffnungszeiten</a></li>
                                                    <li><a href="#">kontakt</a></li>
                                                  </ul>





                                                  <a href="https://www.facebook.com/Blattwerk-380024632104200/" target="_blank"><img class="fb_icon" src="img/logo/bw_fbicon_1index.jpg"></a>


                                                  <!-- MENU IN MOBILE -->

                                                        <div class="top-bar">
                                                          <div class="top-bar-left">
                                                            <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
                                                              
                                                                <li><a href="#">der laden</a></li>
                                                                <li><a href="#">das angebot</a></li>
                                                                <li><a href="#">die fotogallerie</a></li>
                                                                <li><a href="#">blattwerkerinnen</a></li>
                                                                <li><a href="#">öffnungszeiten</a></li>
                                                                <li><a href="#">kontakt</a></li>
                                                              
                                                              
                                                          
                                                            </ul>
                                                          </div>
                                                     
                                                        </div>







                                  </div>


                                  <div class="medium-6 large-6 columns" id="blue">


                                        



                                  </div>

                        </div>


                    </div>    


          </div>


      </div>


  
  </section>


  </body>
</html>

 

top-bar menuvertical menu

Hello

I have my navigation vertical in Large screen and want it to change to a top bar in mobile.

I have used media queries to change the menu. I have two menus in my Html....not sure if that't right...

It works, but the top-bar is not collapsed ( it is vertical ) in mobile.

 

Does anybody have a suggestion what i have to do?

 

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blattwerk - blätter, blumen &amp; mehr</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>

    
  <section class="main">
    <div class="wrap">

        <div class="row">

                    <div class="medium-10 large-10  medium-push-1 columns" id="">

                        <div class="overlay-container">

                          <img class="bg" src="img/bg_img/bg_main.gif">
                          <img class="bg_mobile" src="img/bg_img/bg_mobile.gif">


                                  <div class="row overimage">

                                  <div class="medium-6 large-6 columns" id="red">


                                                  <ul class="menu vertical" id="menufont">
                                                    <li><a href="#">der laden</a></li>
                                                    <li><a href="#">das angebot</a></li>
                                                    <li><a href="#">die fotogallerie</a></li>
                                                    <li><a href="#">blattwerkerinnen</a></li>
                                                    <li><a href="#">öffnungszeiten</a></li>
                                                    <li><a href="#">kontakt</a></li>
                                                  </ul>





                                                  <a href="https://www.facebook.com/Blattwerk-380024632104200/" target="_blank"><img class="fb_icon" src="img/logo/bw_fbicon_1index.jpg"></a>


                                                  <!-- MENU IN MOBILE -->

                                                        <div class="top-bar">
                                                          <div class="top-bar-left">
                                                            <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
                                                              
                                                                <li><a href="#">der laden</a></li>
                                                                <li><a href="#">das angebot</a></li>
                                                                <li><a href="#">die fotogallerie</a></li>
                                                                <li><a href="#">blattwerkerinnen</a></li>
                                                                <li><a href="#">öffnungszeiten</a></li>
                                                                <li><a href="#">kontakt</a></li>
                                                              
                                                              
                                                          
                                                            </ul>
                                                          </div>
                                                     
                                                        </div>







                                  </div>


                                  <div class="medium-6 large-6 columns" id="blue">


                                        



                                  </div>

                        </div>


                    </div>    


          </div>


      </div>


  
  </section>


  </body>
</html>

 

Rafi Benkual over 3 years ago

I answered a similar question here that might help: http://foundation.zurb.com/forum/posts/39977-horizontal-to-drilldown-menu