Menu icon Foundation
Changing hidden properties

Hi,

I'm trying to change some of the auto classes that get added on to tags when they have certain classes applied. Specifically, I want to change some of the properties in the menu drop down function.

I have inspected the html with Chrome and I get the 1st pic below. The class is "class="horizontal menu submenu is-dropdown-submenu first-sub vertical"" When I change the last class to "horizontal" it gives me the desired look (pic 3). However, how do I access these classes and make changes to them?

Thanks.
-Scott

Screen shot 2016 03 01 at 4.15.03 pm

Screen shot 2016 03 01 at 4.15.26 pm

Screen shot 2016 03 01 at 4.15.59 pm

Hi,

I'm trying to change some of the auto classes that get added on to tags when they have certain classes applied. Specifically, I want to change some of the properties in the menu drop down function.

I have inspected the html with Chrome and I get the 1st pic below. The class is "class="horizontal menu submenu is-dropdown-submenu first-sub vertical"" When I change the last class to "horizontal" it gives me the desired look (pic 3). However, how do I access these classes and make changes to them?

Thanks.
-Scott

Screen shot 2016 03 01 at 4.15.03 pm

Screen shot 2016 03 01 at 4.15.26 pm

Screen shot 2016 03 01 at 4.15.59 pm
Scott Koons over 3 years ago

Thanks for the help Robert. I'm new to SCSS, so I am grateful for you pointing a way forward.

Thanks.
-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)
Javascript verticalClass: 'vertical'

and change it to:
verticalClass: 'horizontal'

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

Rafi Benkual over 3 years ago

Nice answer @Robbert Stapel

@Scott Koons Did that answer you question?

Scott Koons over 3 years ago

Thanks guys. I was able to get into the JS and make the needed changes. Still working on some layout issues, but @Robbert Stapel had the right answer!

-Scott

Rafi Benkual over 3 years ago

Cool! Make sure to mark his comment as helpful ;)

Scott Koons over 3 years ago

Will do. I'll also post the code when it is complete.