Jump to content

How to achieve split screen with vertical scrolling on both sides?

Recommended Posts

Hello Squarespace community. 

I'd like to achieve a split screen design like here in an example (https://morrisand.company/work/215-217-mare-street)

Is it there a code I can use to have different content scrolling on two sides of the screen? 

What Squarespace template is recommended to build upon such design? 

 

On a home page I'd like to have a vertical navigation (as in the example's home page). The code I found for this is:
 

// VERTICAL NAVIGATION //

@media only screen and (min-width:600px) {   

  .page-section:first-of-type {     

    padding-top:0px !important;   

  }   

  .page-section {     

    margin-left:400px;   

  }   

  #header {     

    width: 300px;     

    position: fixed;     

    height: 100vh;     

    z-index: 99999 !important;     

    display: table;     

    writing-mode: vertical-r;    

    text-orientation: mixed;     

  }   

  .header .header-announcement-bar-wrapper {     

    padding: 10px 30px 10px 10px;   

  }   

  .header-inner{    

    height: 100vh;     

    display: table-cell;     

    vertical-align: middle;   

  } 

}

Would this code enable me to achieve a navigation like in the example? 

I'd be very grateful for any leads and find out if Squarespace offers more complex customizations like this.

 

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Hi @basianiez,

@WillMyers Split Screen Layout plugin will be perfect for your split layout (and yes, you can make make one side 'stick' in place while the other scrolls).

Your example site looks like it uses a slide out mobile style navigation on desktop. I think this plugin would work for you!

— Hannah
Studio Founded

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment

Hi Hannah @studiofounded,

And when it comes to the choice of template, are there any in particular that offer more flexibility? 

 

Thank you so much for these links to plugins. That's very helpful and probably what I'm looking for.

For a newby web designer like me, the support from Squarespace community is invaluable! 🙏🏼

All the best,

Basia

Edited by basianiez
Link to comment

Hi @basianiez

Glad the plugin links were helpful 😊

If you use 7.1, all the templates include the same features so you can choose any!

— Hannah
Studio Founded

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.