Pin is preventing my menu to show

[clhomme]

Hello everyone! This is my first topic on this forum, and as you can guess, I'm a newbie to GSAP. I love it tremendously though.

 

So, back at the issue. I'm making my portfolio website, and I used GSAP (ScrollTrigger) in my header. I obviously want a menu (it's a hamburger menu, even in desktop mode), which is made in vanilla javascript. Except it doesn't work. I click and click on my menu icon and the menu doesn't appear like it's supposed to.

 

I've shuffled around in my code, and the main issue seems to be the pinning of the header animation because when I turn to false, the js animation works just fine. But obviously, my header animation doesn't.

 

Does anyone have any idea why this happens, and what I could do to remedy it? I would be very grateful! Thanks!

See the Pen qBMgQam by Dhandelyon (@Dhandelyon) on CodePen

[GreenSock]

That just looks like a CSS issue. You didn't have a top or left defined on the nav that's position: fixed. 

See the Pen ExerGrG by GreenSock (@GreenSock) on CodePen

 

Better?

 

I'd also recommend changing your hit area on your menu so that it's easier to click. Right now it's only clickable directly on the lines. 

[clhomme]

Hi! Thank you very much, it worked!