Button not working on the live site

Design help Animations & Interactions
1

Hello,:smile:

I’m having trouble figuring out why one of my buttons is not working on my live site. (nothing happening, as if my button was not linked…)

There is a Lottie animation in my section for the background, but my button’s z index is higher than the other Div and the Lottie animation. And obviously, my button was linked so I can’t understand what is happening …:sob:

Hoping that description makes sense, would anyone have any ideas for how to fix this? I’d really appreciate the help as I’ve been stuck on this one for a little while now. :sweat_smile:

Here’s my Webflow link : https://preview.webflow.com/preview/garageoone-bf9-af40f16752c2e?utm_medium=preview_link&utm_source=dashboard&utm_content=garageoone-bf9-af40f16752c2e&preview=8facf899cf4df9aaaab7f4b4b6b02f79&workflow=preview

Here’s my live site link : https://garageoone-bf9-af40f16752c2e.webflow.io/

Here is my public share link: LINK
(how to access public share link)

2

As you can see, your button is overlapped by that Lottie block. This makes it un-clickable.

Screen Shot 2022-05-13 at 1.44.22 PM
Screen Shot 2022-05-13 at 1.44.22 PM3360×1902 503 KB

Regarding z-index it works with the siblings elements, so you have to take care of the sibling’s z-index.

For divider like this, I’d rather place the divider normally without using absolute positioning and negative margins. Just play with the spacing(padding) more.

And one another option with your implementation can be, if you write a custom CSS to that class pointer-events: none. This will make that element un-clickable and your button will be clickable.

1 Like
3

Thank you so much I’m gonna try to improve the way I build with divider :grin: