Jump to content
GreenSock

Sameer_mishraa

Button Not working

Go to solution Solved by akapowl,

Recommended Posts

Hey @OSUblake
Could you help me out one more time please?

Here is my repository : https://github.com/Sameer-mishra1/Dbait-website

 

As you can see in a desktop, when you scroll all the way to the bottom, the Download button doesn't seem to be working. 
When I inspected it a bit, I realised that there's some kind of overlap between the animation view and the button and that's why nothing happens on clicking the button. I am not able to figure out the exact reason though, please let me know what you think could be the plausible reason.

 

https://drive.google.com/file/d/1iOcjNoqBP9sOtw6aJxG47Ldlgib293xj/view?usp=sharing

Link to comment
Share on other sites

Hi Sameer,

 

If you need help, please provide a minimal demo that clearly shows the issue. The simpler the demo, the better. Thanks!

Link to comment
Share on other sites

See the Pen MWrJPBr by sameer-mishra1 (@sameer-mishra1) on CodePen

 

Here is a codepen demo, as you can see, when you will scroll to the bottom, the download button present there in the desktop view, does not work. 

I am unable to understand why though. 

@OSUblake

Link to comment
Share on other sites

That seems more like a CSS issue than a GSAP one. If I remove GSAP from the equation, you still have the same problem.

 

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

 

Link to comment
Share on other sites

  • Solution

Your SVG is overflowing its container to the bottom and thus covering the button. 

 

You can either set overflow: hidden on that container wrapping your svg or add a position attribute to your button if you want to fix it with z-index, because...

 

Quote

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

 

https://www.w3schools.com/cssref/pr_pos_z-index.asp

 

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×