â–Ľ
Streaming live at 10am (PST)

Clicking button under invisible column

Hello!

My goal is the following:

  1. Two columns on my website
  2. The left column is sometimes invisible and I would like to click elements under it
  3. Columns go on top of each other when the screen is small

What layout should I use? I tried a column layout. I noticed that if I make elements within the left column invisible, the content under is not clickable. However, if I make the column itself invisible, then the right column takes up the space of the left.

Open to suggestions!

@msolonko Hey man, can you elaborate on your layout goals a bit? If so, I am sure I can help!

What do you mean by:

Is your entire screen simply two columns? Or are these two columns part of a section? Are both columns the same height? Something else? LMK!

When is the left column invisible? On different screen sizes? Does invisible mean you want to hide it and the right column moves left? Or does it mean you want the right column to stay put but the left column is not visible to the user? And when you say you want clickable elements under the column, do you mean at the very bottom of the column or right under it, while staying the same width as the column above it? Or something else?

I think I understand this, but just to make sure. You want the left column visible and on top of the right column on smaller screens like landscape and mobile?

Let me know, and I am sure I can help. Also, if you have a share link that lets me view your project (but not make any changes), let me know. Here’s how to get that link if you haven’t done it before.

Thank you for responding!

The columns do not have to be the same height. The left column becomes shown or hidden based on the buttons in the right column (shown in the link). So on mobile, if the left column is invisible, the right one is on top. If it is visible, it will be above the right column.

The link above has all the behavior I want, except that the second button is not clickable when the right column is open. That is what I want to fix.

Link

@msolonko Can you share your read-only link? See the video above on how to get that.

Oops forgot. @myonke Here you go!
Read Only Link

1 Like

@msolonko,

No worries! Is this what you’re trying to achieve? Let me know!

Thank you for helping @myonke ! Kind of - I want the two buttons on the left to be clickable when the left column is invisible. However, when it is visible, the two buttons should not be shown / clickable.

Setting your yellow div block to position: relative with a z-index: 100 should do the trick. Let me know if this helps:

@myonke I tried this. When I press the “open right” button, the two buttons on the left are still not clickable. Clicking “another button” does not trigger an animation like it should when clicked, and the cursor isn’t a pointer when hovering over them.

You don’t have an animation applied to the “another button”

Let’s try and set this up from scratch. Can you explain the purpose of this page and step-by-step what needs to go down? I think these buttons should be in their own column.

Sorry @myonke , by animation I meant “pulse.”

Essentially, I want the “Open Right” and “Another button” to be accessible (clickable) when the left Div Block is invisible. Currently, if the RIGHT Div Block is visible (after clicking “Open Right”), the “Another button” and “Open Right” buttons are no longer accessible, even though the left column is not shown.