Overlap 2 bars

[franticape]

Hello guys, i would like you to help me out sort an issue i’m facing right now.

i want 2 of my bars to overlap. i know i can do this if i make one relative and the other absolute, but i believe it’s not the best solution for responsiveness. i would like to know if it’s possible to achieve what i already have on my dev site but with both bars in relative position. i tried changing the Z-index but as i suspected, that alone would not work. i can’t find the missing piece of the puzzle since i don’t know the bar yet (in a matter of css structure). could you please point me to the right direction?

thanks!

[rad]

Hi there,

Thanks for writing in.

From what I’m seeing, the contact form is already behind the hero bar, and the button or half of the form is actually behind it. Perhaps what you want is have the form overlay the hero bar? Would you mind providing a mockup design of how it should be? I can’t promise any fix, but this seems like an easy fix.

Thanks!

[franticape]

i’m sorry, i’ll try to explain myself better:

the solution i have right now is by making one bar relative and the other one absolute, that is the solution you’re seeing. if you try this approach, though, you’ll see that the translateY is nor really working for all the screens so i wanted to try a relative approach, i wanted to make both bars relative and overlap them, so i could have an easier fix for the animation.

[lely]

Hi There,

Thank you for the clarification. Using two relative to overlap means we have to use Z-index and negative margin. See this: https://screencast-o-matic.com/watch/cb6TnpI9uP

This might help: https://stackoverflow.com/questions/15309157/css-using-position-relativeabsolute-or-negative-margin