Menu icon Foundation
Manually Invoke "Hamburger" Top Bar Menu

Using Foundation for the first time and it's great so far. I'm running into a problem with the Top Bar menu functionality.

The top bar works great when going from desktop (showing the full menu item list) down to mobile (showing the 'hamburger' menu icon which activates a drop down menu).

What I need to do now, though, is be able to invoke this functionality in my own code. Normally this happens based on media queries, but I also (in addition) need it to happen whenever the top bar gets the 'fixed' class (ie. I have the top bar set to be 'sticky' and when it 'sticks' I want this top bar menu to behave like the 'mobile' navigation).

Any tips on doing this? I could go in an basically try to emulate what it's doing by figuring out all the proper CSS an implementing it manually, but I'm afraid I'll miss something and things will break.

The bottom line is: Is there any way to invoke this 'mobile menu' functionality a simple way when the top bar is 'fixed' at the top of the screen?

Thanks for helping a newbie to this framework!

top-bar

Using Foundation for the first time and it's great so far. I'm running into a problem with the Top Bar menu functionality.

The top bar works great when going from desktop (showing the full menu item list) down to mobile (showing the 'hamburger' menu icon which activates a drop down menu).

What I need to do now, though, is be able to invoke this functionality in my own code. Normally this happens based on media queries, but I also (in addition) need it to happen whenever the top bar gets the 'fixed' class (ie. I have the top bar set to be 'sticky' and when it 'sticks' I want this top bar menu to behave like the 'mobile' navigation).

Any tips on doing this? I could go in an basically try to emulate what it's doing by figuring out all the proper CSS an implementing it manually, but I'm afraid I'll miss something and things will break.

The bottom line is: Is there any way to invoke this 'mobile menu' functionality a simple way when the top bar is 'fixed' at the top of the screen?

Thanks for helping a newbie to this framework!

Bob Sawyer over 4 years ago

Following for answers. I'm interested in this as well.

Rob Feature over 4 years ago

As a followup, I was able to pretty simply add the CSS I need to display the menu trigger (hamburger) and style the drop menu properly (when it would show). But the .js event that opens/closes the dropdown menu isn't active.

I could probably write my own bit of .js to make it work, but it sure would be nice to have a clean, foundation-driven solution to this instead of rolling my own. (I dont like creating my own solution if I dont have to mostly because it's bound to be slightly different than the way foundation does it when responsive..That lack of 'sameness' bugs me :))

Bob Sawyer over 4 years ago

Agreed!