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

ppixelbendr

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?

8 comments

JJeremy

Yes, this is possible.

JJeremy

Where do you think the hangup is?

ppixelbendr

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?

JJeremy

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.

ppixelbendr

Ok, but what about full page scrolling? Also dynamic font sizes?

JJeremy

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.

ppixelbendr

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/

JJeremy

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

Join the Webstudio community

Left Nav and Full Page Scrolling