Menu icon Foundation
How do I make my menu on mobile vertical?
  • 6
    Replies

<div class="row">

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

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

<div class="title-bar-title">Menu</div>  

</div>

 

<div class="top-bar" id="menu">

<div class="top-bar-left fs18">

<ul class="dropdown menu" data-dropdown-menu>

 <!--<li class="menu-text">&nbsp;</li> -->

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

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

</ul>

</div>

<div class="top-bar-right fs18">

<ul class="dropdown menu" data-dropdown-menu>

 

 <li><a href="#">WHAT'S NEW</a>

<ul class="menu dropdown vertical" data-dropdown-menu>

<li><a href="#">Dementia Village</a></li>

<li><a href="#">New Article</a></li>

<!--<li><a href="#">Events</a></li>-->

</ul>

 

 </li>  

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

<ul class="menu dropdown vertical" data-dropdown-menu>

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

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

<li><a href="#">FAQ's</a></li>

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

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

</ul>

 </li>

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

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

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

</ul>

</div>

</div>

</div>

p

<div class="row">

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

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

<div class="title-bar-title">Menu</div>  

</div>

 

<div class="top-bar" id="menu">

<div class="top-bar-left fs18">

<ul class="dropdown menu" data-dropdown-menu>

 <!--<li class="menu-text">&nbsp;</li> -->

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

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

</ul>

</div>

<div class="top-bar-right fs18">

<ul class="dropdown menu" data-dropdown-menu>

 

 <li><a href="#">WHAT'S NEW</a>

<ul class="menu dropdown vertical" data-dropdown-menu>

<li><a href="#">Dementia Village</a></li>

<li><a href="#">New Article</a></li>

<!--<li><a href="#">Events</a></li>-->

</ul>

 

 </li>  

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

<ul class="menu dropdown vertical" data-dropdown-menu>

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

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

<li><a href="#">FAQ's</a></li>

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

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

</ul>

 </li>

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

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

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

</ul>

</div>

</div>

</div>

Daren Barry over 2 years ago

Hey AJ - do you have a link to a site on the web? Much easier to look at and provide feedback. Cheers

AJ over 2 years ago

Hi Daren, 

Thanks for responding. I do have a website that I'm working on. Its listed below. I was also wondering if I could simply remove the top bar from left to right and simply have the nav links centered. I'm hoping I can (I'm a newbie with foundation). But if I can't, I would still like the links to dropdown vertical when on mobile so they're not sliding off the canvas.

http://new.roseleafcares.com/

 

Thanks for any help!

AJ

Daren Barry over 2 years ago

What version of Foundation are you using? FYI - when I minify my CSS, I like to place this at the top of the file:

 /* Foundation 6.3.1 */ (or what ever the version is ). So, in the first UL classnames, add vertical and medium-horizontal, and I'd change data-dropdown-menu to data-responsive-menu="drilldown medium-dropdown".

 

If you need to view source, you can look at www.thealignmentcenter.com

AJ over 2 years ago

I'm using version 6. Just downloaded it last month

 

Rafi Benkual over 2 years ago

 There are responsive menu classes to do this. .vertical makes the menu vertical on small and up and .medium-horizontal ovverides this for medium and up. http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-menu

AJ over 2 years ago

Thank you Rafi B.! That helped. I don't know how I didn't find that answer.. thanks so much :)