Most elegant way to add header nav button with prevent default action?

Support
#1

I can’t find any documentation anywhere about adding an animated hamburger that doesn’t change only on hover, but on click/tap, but removing the x theme menu part (I have to target the button for a jQuery animation). It obviously doesn’t work if another menu pops up as well. Is there a way to disable the modal or off-canvas content to have a button that responds to clicks without the menu? Or should I just program my own in a content area box? Trying to find a good way to approach for this time and the future. Thanks in advance!

#2

Hi @jrhager84,

Thanks for reaching out.

I checked the modal toggle and it doesn’t change on hover, it does change on top and click only. And you can remove the X part of the toggle by switching to standard icon, it’s the only option that allows customization of the toggle.

The burger menu is predefined and can’t be customized, it only has options of burger, grid, horizontal and vertical. I’m afraid you’ll have to do javascript customization to change that behavior.

Though, I’m not sure about this question

Is there a way to disable the modal or off-canvas content to have a button that responds to clicks without the menu?

But yes, any change outside the given options or features needs customization.

Thanks!

#3

Maybe I should clarify:

I want a hamburger icon, but the buttons (with no off-canvas content or menus) only have hover animations, not click (or touch in this case) options. Since it’s a mobile menu, hovering means nothing. It’d be a touch at that point. I just want to use the ease-of-use of a toggle button in the header editor, and then assign my own javascript to the button. I’m just not sure how the animation is done in X. Is it CSS3? JS? Would e.preventDefault(); prevent the animation as well? Hopefully that clears things up. Thanks!

#4

I want the button without the canvas. If that makes sense. I’m targeting the button for a jQuery .onclick() event.

You can see what I’m going for here > https://joelhager.com/sites/love/

#5

Hey @jrhager84,

The bar / burger icon to X icon change on click / tap is only available on Navigation and Modal elements. There’s no way to remove the menu or modal.

What I’d recommend instead is you use the Button element and enable its Graphic Primary and Secondary. To clearly understand what I mean, please watch the screencast at https://youtu.be/3g5SjM6lpmI

Hope that helps.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.