basianiez Posted October 23 Share Posted October 23 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
basianiez Posted October 23 Author Share Posted October 23 I found this guide, but I'm not sure if that's apply to example I sent. https://www.will-myers.com/articles/split-layout-design-in-squarespace-71 Link to comment
studiofounded Posted October 23 Share Posted October 23 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
basianiez Posted October 23 Author Share Posted October 23 (edited) 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 October 23 by basianiez Link to comment
studiofounded Posted October 23 Share Posted October 23 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment