Need help translating two sections at once

Design help General
1

Hey there,

When I click the “About” link in the navigation bar from the home page:

  1. I’d like the contents of HomeWrapper to translate left 100% off the page.
  2. Then the contents of AboutWrapper to translate left to the origin, which should put it in the center of the page. (It starts hidden to the right)

If you preview the site, you’ll notice this almost works but the contents of HomeWrapper disappears instead of translating gradually to the left. If anyone knows how to fix this, help would be much appreciated.

EDIT: The navigation is a WIP, you might have to exit and re-click preview mode to repeatedly test the site.

Kind Regards, Paul

Here is my public share link: LINK

2

Hi,

The thing is that Homewraper is on position auto.
Homewraper doesnt dissapeard it just go down.

1242×1260 77 KB

So when about appears, it pushes Homewraper down.

1528×1294 98.4 KB

You may want to set Homewraper to absolute to fix that

3

With HomeWrapper set to absolute, is it possible to still keep it aligned at the edge of the container? (In line with the logo)

EDIT: Actually, I tried changing it to absolute and it still gets pushed down…

4

I ended up leaving HomeWrapper on auto, and changing AboutWrapper to Absolute (Full), and it works! It’s always the simplest changes isn’t it… Only took me three hours to find.

Cheers for the help :slight_smile:

Kind Regards, Paul

5

Hey,

Yes sorry i got confused, it’s your parent Div block container who got pushed.
Your solution is good, Div Block container set to absolute would also work.
No problem,
Regards,

1 Like