Floating Modal?

Design help General
1

I am trying to replicate: https://www.insead.edu/executive-education/general-management

The orange bar that is floating and is responsive as well (moves from right to bottom on viewport size)

Something similar is here:

EXAMPLE 2 SCROLL AFFECTING A DIFFERENT ELEMENT - http://interactions.webflow.com/ but no mention on how to create the modal more focus on the scroll interaction.

Any help will be great! Thanks Forum!

2

Looks like I figured this out myself. I will put up a tutorial here for the forum in a bit.

3

Awesome. Let me know when it is up.

4
  1. Move to the layers tab on web flow of the page you want it to work on.
  2. Add a DIV block just below the BODY layer.
  3. Give it a class (FloatingFooter is mine).
  4. Give it a height of 55 px, this is most legible for a floating Navigation Bar
  5. Change Position to Fixed and Location to Bottom.
    478×534 24.6 KB
  6. Give it a Z-Index of lets say 10 (If you have not set this before) so it is the uppermost layer.
  7. Add a Linkblock into the Div Layer, give it a class.
  8. Depending on how many icons you need choose a width (I need 5, so I chose 20%)
  9. Height to be the same 55px and the Typography needs to be center aligned.
  10. Add an Image and Text Block inside the link block.
  11. The image size has to be 80x80px and hidpi
  12. Change the text and point the link block to the right URL you want it to go to.
  13. Add Hover or Pressed States if required.
5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.