Streaming live at 10am (PST)

Is there an alternative to the hamburger icon to open a navigation?

I have two menus. Is it possible to open one of them by clicking a link within another?

There is a relationship between two separate menus that allows one to close if another is opened which leads me to think it is possible, at least with a little manipulation of the js. Has anyone had tried this, or know of a way to open the navigation without clicking the hamburger icon?

I believe you’re over complicating it, just look into setting up an interaction trigger that reveals your second menu element. Without seeing the specific project I can’t really give you any more guidance, but feel free to include your read-only link if you get stuck getting it to work.

Hi mikeyevin,
Thanks for the suggestion.
I tried using interactions but turns out Webflow doesn’t allow interactions (or at least interactions v2) to be placed on an element outside of the navbar I’m wanting to affect.

This project shows what I’m trying to achieve. The navigation using the title ‘MENU’ has a list element inside called ‘Open Second nav’. When this is clicked I’d like to open the MY PRODUCTS’ navigation. This is only for landscape-mobile and mobile viewports - tablet and above use have different behaviour.

After looking at your project I’m still a bit unclear, but it looks like you want two menu icons on mobile with a link in one nav menu (nav 1) opening up the other nav menu (nav 2)?

You can absolutely trigger an element outside of the element you want to affect, however you’re referencing the wrong trigger. The one you’re looking at “triggers” when a nav opens, but since you want to trigger the nav with a click, you need to choose the “Mouse click (tap)” option.

Yes, that is exactly what I’m looking to do.

I can’t find a way to open the second nav using a Tap Click either? The options I’m presented with are in relation to the element currently selected.

I could always try using legacy interactions with the ‘select different element’ command, but this doesn’t provide custom navigation functionality such as closing a navigation when clicking off the nav.

If you don’t have too much experience with IX2 I’d recommend going through the course on Webflow University - however the lessons on triggers and animation and show and hide elements on click may give you enough to get going. It’s extremely powerful and much more intuitive than legacy interactions once you get the hang of it, so I’d urge you to go that route over relying on the old version.

The short answer is that you’re going to want to use “Start an animation” then choose which elements you want to affect (this can be any selected element, or even based on class) and what happens over the course of your animation duration.

Does using IX2 provide complex commands such as opening secondary navigation while retaining the functionality provided by the nav? Or, am I back to square one, having to build it entirely from interactions? The later is exactly what I’m trying to avoid.

Ideally, I was hoping that there would be a javascript trigger that I would be able to call with an onClick function.

What functionality are you wanting to retain?

When you say “building from square one” it sounds like your expecting a long process, but once you know how the system works it shouldn’t take long and will give you full control over what you’re wanting to accomplish. It’s possible that using Javascript could yield a similar experience (especially if you’re comfortable with it), however I personally would suggestion utilizing what is provided with native Webflow tools.

It’s important to remember that the Navbar element can be recreated “manually” and will not only provide the same experience, but can be modified to act however you’d like it to act.

Thanks Mike, I appreciate you help and knowledge with this.

The special functionality which I mentioned relates to that already built into the navigation. For example, one of my navs doesn’t cover the entire page but clicking on the page background closes the nav. As far as I’m aware this cannot be done with interactions alone.

Also, when previously using interactions for navigations I’ve found issues with the first click, second click commands. For example, if nav 1 is already open, I can set an interaction on nav 2 that closes nav 1, but this leaves nav 1 listening for the second click (as the first has already originally opened the nav) which would result in nothing happening when clicked again. This makes for a poor user experience.

With this in mind, trying to approach it with js may be best!

No problem, glad I could provide some help!

This is totally possible, just make sure your navigation wrapper is nested within a larger container that is fully transparent and spans the full height and width of your viewport. Make sure the z position of this element is behind your navigation wrapper and set a trigger that applies when a user clicks on this element that closes the navigation.

In this case you should be able to set the trigger to apply to both navigation elements instead of just one. I’m admittedly not as familiar with the legacy interactions, however IX2 allows you to easily trigger any number of different elements upon clicking your target element - so as long as your structure is setup appropriately it should be possible to ensure a good user experience.

Hopefully my suggestions give you an alternative path if the Javascript route proves troublesome and feel free to reach out to the community if any other questions come up!

1 Like