Link is not clickable

[torry]

Hi

Can someone help me understand why the section from nav bar About is not clickable.

The other 2 (Portfolio , Reviews )work but as soon as i add style on them (.about) none of them works.

Thank you! 

 

See the Pen jOdBeQO by torry91 (@torry91) on CodePen

[akapowl]

 

Hello there @torry - welcome to the GSAP forum.

That is nothing really GSAP related - more like a styling issue you're encountering.

 

Your problem is, that the picture sits on top of the nav and thus blocks pointer events to go through to elements below it (on the z-axis). [ Edit: to be precise, it's not the img itself, but the wrapping div.pic1 ]

You can visualize that easily by right clicking where that link is that supposedly doesn't work, and then in the context menu click 'inspect element' (or something along those lines) to inspect the page in your browser's dev-tools.

 

A way to solve it would be to boost the z-index of your nav via CSS.

Don't forget to also set a position for the nav to make it work in the first place.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

 

Something like this. I hope that'll be helpful.
 

See the Pen QWYvdJG by akapowl (@akapowl) on CodePen

 

[torry]

Thank you very much 🙏
i checked through inspect but somehow didn’t pay attention to this .
I appreciate a lot your help even if it’s not related to gsap.

Could you please suggest regarding  my other problem(the Contact button is jumping when the 3rd phrase appears )
Thank you for your time !

[Rodrigo]

Hi,

 

The problem is that your paragraph is empty which causes to have no height (0px), then when the text plugin adds text, the height changes, then when the text is removed it goes back to 0px again.

 

What you can do is add a non breaking space in it and set the height using GSAP:

const textElement = document.querySelector(".text3");
gsap.set(".text3", { height: () => textElement.clientHeight });

Here is a fork of Paul's codepen that has this approach:

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

 

I'm sure there are other ways to tackle this, but this is the first one that popped into my mind.

 

Hopefully this helps.

Happy Tweening!

[torry]

I’m grateful for your help !!!
Thank you !!! 🙏
Have a great weekend !