Hi, I am currently in the process of trying to convert the default webflow navbar to have flex display properties so that I can style it properly. The end result is to be able to animate the open/close menu button (which is the only reason that I’m using the default Navbar element)
The problem occurs when trying to control the behaviour of the drop down menu which I want to be 100vh and expand to 100% width, with the Nav links horizontally centred with some padding between.
Does anyone have any experience trying similar with any success? or is there an alternative way to create the animation without using the navbar menu properties.
That would be my preferred course but the problem is I want to add a custom hamburger menu interaction where the three lines of the hamburger turn into a cross, however to do this you need to apply three interaction to a trigger which I can’t do unless I’m using the default navbar or I add my own JavaScript (I am not a coder)
Why do you have to use the default? To do the hamburger interaction you can make it out of divs. I actually think there is a youtube video of someone doing it on the webflow channel. But not 100% sure thought.
Thanks for the reply, The hamburger menu I have is three divs centred in a container. What I want to happen is that when you click it triggers three different interactions that apply to each of the three divs (top, middle, bottom) The problem is Webflow only allows you to add one interaction on a trigger, unless you use the default nav bar which has some properties baked in to allow this.
I want to use my own custom drop down mobile nav menu if possible if there is another way to add this animation to the trigger?
True. But you can put more wrapper divs. If you understand. Several divs
inside a div. And then, pressing one area you can get more than one
interaction going. Im on a phone or i would have showed you. Hope it makes
sense
So I tried wrapping the hamburger menu in three divs wrapping each other, with the individual interactions applied to each div and it sort of works, but it does break as if you click on certain parts of the menu button it causes only that part to animate.
Further to this, by making sure the “interactions wrappers” have fixed width and height properties it solves the problem of accidently clicking in the wrong part. Now I just have to get the animation right!
So thank you Krubens, it’s a bit of a hack but it does seem to work so far.
Just wanted to add to this in case anyone reads the previous posts. You can add multiple triggers to an element that targets different elements, so you can have a click trigger on a menu button which targets the elements within the button itself and you can add another trigger to open a drop down menu for example.
Do not add multiple div-wrappers with interactions applied inside of each other like a russian doll it only leads to headaches. I was wrong in originally thinking you can only apply one trigger at a time.
