Streaming live at 10am (PST)

Interaction Problems—Sidebar + Dropdown

https://preview.webflow.com/preview/usuals-top-notch-project?utm_medium=preview_link&utm_source=dashboard&utm_content=usuals-top-notch-project&preview=1144370ae6fca59b887003c79a3a9285&mode=preview

Hi, I’m trying to create two interactions on this site,
1: When Info is clicked a sidebar will pop out from the right-hand side of the website.
2: When more info is clicked under a project image, a larger description of the project drops down.

My problem is when the sidebar is activated its seems to disable the more info interaction. The z-index of the sidebar is 5000, I tried changing the more info click down z-index to 6000, both interactions worked then but you could see the more info on top of the side bar.

any help greatly appreciated! thanks

Hi Kayley,

Thanks for reaching out to the forums and Happy New Year!

This is an awesome interaction you have going on, and there is only one more modification that we need to make to have this function successfully.

All that needs to be modified is changing the element that is being hidden on the interaction you have set for the “Info” text in the navbar. Instead of targeting the classname “Div Block 4”, the element with the classname “sidebar” would need to be targeted to display none on the hide part of the interaction.

I have a made a quick video to demo what this can look like.

What is going on is that even though you’re hiding the “Div Block 4” in the interaction, the sidebar element is still active and therefore is layering over the “More Info” button.

​Hopefully this helps, and please feel free to reach back out if you have any more questions; I’d be more than happy to continue assisting.

My best,
Riley

Thank you so much for such in-depth help !! I really appreciate it
I think I’ve got that issue resolved, but now when I click on more info even tho the ‘size interaction’ is at 0 pixels as initial state on the drop down text a sentence or two of it is still appearing, I have no idea what to do to fix this.

If I could ask another question, when I add a slider feature to my images how do I make them just fit the image rather than the small grey bar that appears on the second image here?

https://preview.webflow.com/preview/usuals-top-notch-project?utm_medium=preview_link&utm_source=designer&utm_content=usuals-top-notch-project&preview=1144370ae6fca59b887003c79a3a9285&mode=preview

Also I wonder if it is possible to have instead of a sort of icon for the arrows, a cursor that is responsive to the amount of images left, i.e, 2/13. I’ve attached a image of what I mean below and a website which utilises this capability. Thanks so much!