Join the Webstudio community

Updated 2 months ago

Left Nav and Full Page Scrolling

At a glance

The community members discuss the feasibility of implementing a portfolio website with a left navigation and full-page scrolling for desktops/laptops, but regular scrolling for tablets and mobile devices, using Webstudio. The consensus is that this is possible, with guidance on creating the vertical navigation and using CSS features like scroll-snap to achieve the full-page scrolling behavior. Dynamic font sizes can also be handled using CSS techniques like clamp() and minmax(). Some example websites demonstrating full-page scrolling are provided.

Useful resources
Hi, I have two requirements I'm not sure are possible with Webstudio. I need to make a portfolio website with a left navigation, and I need it to have full-page scolling for desktops and laptops, but regular scrolling on tablets and mobile devices. Is that possible to implement with Webstudio?
J
p
8 comments
Yes, this is possible.
Where do you think the hangup is?
Well, I didn't see any template examples with the left nav, nor full-page scrolling. Any guidance on where I'd begin to get those two features done?
Can you build a site without starting from a template?

You can create your navigation the standard way but then set the direction to vertical. It would need to be within a container that's also set to take up X amount of the width while the main content is on the other side.
Ok, but what about full page scrolling? Also dynamic font sizes?
Pages scroll by default, I'm not sure what you mean by that.

Dynamic font sizes are just CSS and you can include that within Webstudio. Some people use responsive units like rem and then modify sizes on breakpoints, but you can use clamp(), minmax(), etc just as you would when building a site in code.
Here are some examples of Full Page Scrolling. It's like slides... : https://www.above.com/ or
https://alvarotrigo.com/fullPage/# or https://love-ed.webflow.io/
Ah. You don't need js for that, you can just use scroll-snap behavior in css. So, yes, Webstudio can do this.
Add a reply
Sign up and join the conversation on Discord