Streaming live at 10am (PST)

Custom burger menu not opening menu


#1

Hi everyone,

Can anyone help me with this? I used one of the awesome burger animations from http://burgeranimation.webflow.io/ by @zbrah, but I can't get it to actually open the menu.

Is it because of the interactions on the burger menu, or something else? I tried adding a new interaction to open up the Nav Menu (i.e. I set the Nav Menu to display:block on Click), which kind of worked, but isn't a solid solution.

If anyone can help me, that would be great!

Thanks in advance,
Chris


Here is my public share link: https://preview.webflow.com/preview/after-five?preview=1450245a9ff90498aec25b291a439489
(how to access public share link)


#2

Hey @Hoog,

Glad to see people using my burgers, thanks for the heads up :slight_smile:

So here is what i do personally, and probably what you should do to keep full control.

Hide you navbar desktop for tablet and lower

Drag a new container hidden on desktop but displayed on tablet and lower

Set it to relative

Drag a new div inside you container, put height, absolute top

Put Initial apparence on the new div on Y of minus your height (here 400px)

Add a new div in container with your burger inside : Absolute top right, Z index high

Finally set a new interaction on click on burger

On click, affect different element -> menu`

Move to origin on first click.
On second click move back Y -400px

And there you have it.

Put your links inside and everything should be fine

Of course the idea is :

Do whatever you want with the interaction, make it come from left/right, opacity, bouncing whatever you want.

Anyway

HERE is the live project
http://burger-mobile.webflow.io/

HERE is the read only link
https://preview.webflow.com/preview/burger-mobile?preview=c59205b6b8b5de712fa11e6c1dff8f1d

MP me if you want me to send you the project


#3

Thanks so much Louis @zbrah!

That works a treat! Thanks heaps for taking the time to reply and help me out.

Cheers
Chris


#4

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