I inserted an embed code section to my website where I use a collapsible sidebar. The problem is that the embed section doesn’t allow my sidebar to expand fully anymore. It can only partially expand because the embed sizing blocks it!
Here is a video showcasing the issue:
Is there a way I can get around this? I need to keep the embed and really do not want to go back to a static sidebar. Thanks for your help!
Here is my site Read-Only:
There’s no way for me to test this but you might try:
or
Thanks so much for your help! The 100% I have tried with no luck. Will try the scale change, but I admit that I used a cloneable for the menu-open + I actually don’t understand how that works. It doesn’t appear to be created with an interaction. There is a 2nd style selector called “mode-two”, which I assume has something to do with the open/close but I can’t figure it out + therefore can’t properly trigger the scale.
This could be tricky if you’ve never created or modified an interaction. I recommend checking out the tutorial link below to get the basics.
I don’t see the “mode-two” selector but when testing this didn’t affect the interaction for me. I do see there is a separate mobile navigation and I did not investigate to see if any changes will need to be made there.
Tricky part 1:
Since your interaction’s trigger (.square) is within a component, I recommend selecting the trigger and copy it. Then click outside of the component and paste the duplicate trigger anywhere on the page. We’ll use this duplicate to make the changes. This makes it easier to modify, since your html-embed element is outside of the component. The duplicate is temporary while you make your change. You’ll delete it when finished.
Step 2: Select the duplicate trigger and then navigate to the interactions panel. You will see there is an element trigger applied to it called “Mouse Click - Open Menu + Close Menu”. Click on this to open the interaction’s properties.
(Side note: I see there is a second interaction applied to this trigger. I don’t believe this is needed but not sure. It looks like it was created as a test possibly? I deleted it for my test)
Step 3: Under the “On first click” title there is an interaction called “Open Menu”. Click on this to see the properties. You will see the existing Size change for “.navbar”. This is where the click is telling the navbar to grow in width. We also want to include the scale change for the embed element here.
• To do this, select the embed element and then create a new “Action” by clicking on the plus sign.
• Click the scale property. Set the property to “initial state” and the scale of 1.
• Click the Action plus sign again to create the shrinking size. I used .8 for the test. Then save the interaction. Again, I can’t test this since the embed code requires publishing to view the live site. You may need to use .7 or some other scale that works best.
Step 4: This test is for the On First Click/Open interaction. Once you’ve gotten it sized correctly, you’ll need to reverse the movement (similar steps) for the close interaction.
