Menu icon Foundation
Force sub menus to stay open and reposition

Hi all,

I am wondering if there is a way to force the drop down sub items to always remain open instead of having to hover over them. I also want to position them horizontally centered below its parent item.

I'm using Foundation 6

Thanks for the help!

-Scott

foundation 6menusub-menu

Hi all,

I am wondering if there is a way to force the drop down sub items to always remain open instead of having to hover over them. I also want to position them horizontally centered below its parent item.

I'm using Foundation 6

Thanks for the help!

-Scott

Robbert Stapel over 3 years ago

Hey Scot,

Assuming youre using the sass version of foundation, you should do exactly as the documentation says.

See the correct part of the documentation:
http://foundation.zurb.com/sites/docs/dropdown-menu.html#js-options

It says that the "data-vertical-class" is the class applied to vertical oriented menus, Foundation default is vertical. Update this if using your own class.

To update this class open the cerrespondending file:

bower-components > js > foundation.dropdownMenu.js

than find this line: (in my file its on line 378)

verticalClass: 'vertical'

and change it to:

verticalClass: 'horizontal'

After that, be sure to save the file and update your app.js file! By tapping a space and save it.
Updating your app.js causes gulp to reload all files and actualy save the changes you made in the "foundation.dropdownMenu.js" file.

Offcourse you can replace with any class you wish, as long as you style it correct it will work.
Since you already tested it by changing the class to "horizontal" in the Chrome dev tool, this will do the trick for you.

Hope this helps!
- Robbert

Scott Koons over 3 years ago

Perfect! Thanks Robbert. I really appreciate the help and direction. I'm fairly new to SCSS and Foundation 6, but this definitely helps!

-Scott