Full page navigation H/V

Hi Everyone,

A client just showed me this website (link below) for his new website. I like it very much and hopefully I can get into this in Webflow?

Principle is to have a full hero page with left, right, below navigation (see image attached)
*Navigation is only when clicking on the arrows, not scrolling from left to right

Maybe someone has already built something similar?

This is the live website: Pullman Lifestyle Hotels - Chic et design

Hey @palombokevin,
Thats an easy navigation to replicate with CSS Grid and some interactions.

You basically need a structure like this:

  • A fixed container
    • width: 100vw , height: 100vh and overflow: hidden.
  • A movable area
    • A made this a Grid with 3 columns and 2 cells
  • Each cell have the same structure as the Fixed container
    • width: 100vw , height: 100vh and overflow: hidden.
  • A container for you content with
    • height: 100vh and overflow: auto

I created a template for you that you can reverse engineer to learn or just clone and use it:

https://webflow.com/website/Slide-Like-Pages?s=slidelike

1 Like

Hi @gilson ! My day is starting great thanks to you :slight_smile:

I cloned your work from now, and really appreciate this! I will let know and share when project is finalized.

Have a great day,

1 Like

Hey @palombokevin, I would love to see the finished project! Please tag me in when you are done.

Have a great day,
Gilson

Hello @gilson Iā€™m working on this now, how do you work on left/right/bottom page as this is an effect?

Thanks!