Adding Element on Top of Slider

[zenon]

I am trying to recreate this site in Webflow http://www.stonecresthomes.com/
here is where I’ve got so far https://preview.webflow.com/preview/stonecrest-homes?preview=3600e53ac8d80a4d180065dcec41378f

In particular I am stuck trying to replicate the following 2 elements:

1- The section on the right of the homepage (with ‘Find a home’, ‘home site search’,etc) that remains “on top” of the slider:

2- The menu at the bottom of the slider. It sits “on-top” of the slider as well and the menu “folds out” upward, not downward like most menus do:

Thank you in advance for your help!

[vincent (Vincent Bidaux)]

Basically you have this structure:

section
– container (position:relative)
– – slider (position:relative, z-index:1)
– – vertical bar (position:absolute + placement settings, z-index:2)
– – menu (position:absolute + placement settings, z-index:2)

[zenon]

Thanks! I’ve almost got it. I did not know about z-index so thank you for that!

For the vertical bar I did the following (was this the right approach?):

1. Created a Section
2. Added a Column to get the vertical element.
3. Added my images, header text, and paragraph text to the column
4. Positioning vertical bar

Now I’m trying to get the vertical bar positioned in the right place. My trouble may now be due to how I created the vertical bar. Did I do that right? and how now to get the vertical bar to sit in the right spot? Thanks again!

[vincent (Vincent Bidaux)]

Like this?

http://vincent.polenordstudio.fr/snap/vzfz9.jpg

[zenon]

Thanks! I was able to figure it out thru trial and error to get it to sit just right… what threw me was the visual layout/edit mode did not look like the live view… There is probably a better design layout for this site but to match what they are doing currently I’ll just stick with it looking ‘off’ in edit mode.

Here is a screen cap of the settings I used to place it correctly:

Here is how it looks in live/preview mode:

[zenon]

One last issue here: the width of the Vertical Bar on the site that I am trying to recreate is 260px wide, in Webflow it is telling me that the width for is set automatically from the grid system. I used a 6-column element to create the Vertical Bar in Webflow.
Was there a better way to create my Vertical Bar in Weblow than using a Column Element? Should I just use a Container?