Pattern visibility on click?

Hi @ohlookitsdany ??

Could you expand a little more on whether it’s the Navigation block’s styling or its structure that you are least happy with? That info might help inform the best approach.

I created a pattern that has everything laid out the way I’d like it. I’m just not sure how to set it to reveal on a button click

Does this pattern include everything that is normally a part of the Navigation block, including hamburger button, links etc?

If you have everything you need and are only looking for a means to toggle visibility using JS. You could write and enqueue your own script to handle that.

An alternative option could be to create your own custom navigation block. It could then also leverage the interactivity API as the core Navigation block does to control opening and closing the navigation.

It’s a little bit of both, styling and structure. I’m trying to layout the navigation in columns, kinda. I’ve included a screenshot of the pattern I’ve created to help demonstrate what I’m trying to do.

Basically, when you click the hamburger menu on the navigation block, it pulls up that modal overlay that just has the various links added to the menu. I’d like to style and organize that overlay the way I have in this pattern, but obviously, I can’t do that with the native navigation block, as it doesn’t allow for things like separators and various rows, etc. So, in lieu of that, I was thinking I would just render an SVG of a hamburger menu icon that would toggle the visibility (when clicked) of this pattern in the header template part instead.

Does that make sense?

Thanks for the clarification @ohlookitsdany.

My initial thoughts are you might find a plugin that already covers this sort of use case, saving you time and effort. There are quite a few plugins relating to navigation so it might be worth giving a couple a run before settling on a winner.

If you want full control over the end result, or can’t find a suitable plugin, my earlier suggestions are probably good places to start.

Yea, I’m trying to avoid adding plugins wherever possible, so I don’t mind the extra time and effort within reason. I’ll take a look at your resources, thanks. ??