Nav block: Use alternative trigger to open nav block modal

Hi,

In certain circumstances, header layout changes from desktop to mobile and the nav trigger needs to be moved in a different place.

As it is pretty complex to achieve with CSS alone, maybe we could use an option to set a different trigger for the mobile modal?

For instance, below, the mobile trigger needs to be on the right side of top bar, whereas the desktop menu is on the left side of bottom bar.

image

Hello @yankiara,

Thanks for the suggestion.

Using the Link Wrapper Nav action might be the solution in this case:

Or do you have a more specific suggestion linked to a possible Nav block option?

Thanks in advance.

Thx @Louis,

I had not seen this, it seems you thought about everything :slight_smile:

That said…

It seems to work fine when I don’t hide the nav block in mobile view.

But if I use display: none to hide my desktop menu on mobile (either on nav block or its container), the modal doesn’t appear when clicking the trigger (which seems logical, because of the display: none).

So… how do I hide the nav block while still having the modal visible?

I tried with height: 0 and visible: hidden on the container, and modal appears, but as I have some gap on the section container wrapping my header bars, I still have a remaining space.

Maybe I’m missing something here, is there quick and clean way to do this?

Hi @Louis,

I’ve solved my gap issue by using a block wrapper and playing with margin/height/visibility to hide the nav items on mobile and use an alternate trigger for the modal.

The issue now is that when using an alternate trigger, modal doesn’t appear in the editor, so it is impossible to style. Could the trigger work backend as well?

I was about to make a new post similar to this.

I have a custom hamburger block, and now I want to trigger the modal from the nav block. Is it I need to copy nav ID in order to make it work?

Can someone point me in the right direction?