Split Section layout with two sections side by side and one sticky

Hi all - I'm setting up a works page for a musician. I need to put two sections side by side to create a split layout. It's not just a visual thing so not about wanting split section look (I know we can do this easily with Fluid Engine). 

What I need is to have a vertical row of buttons down the left side of the page, creating a menu - these will click away to all of her categories (other pages). The right side of the page however, will have accordions on it, displaying each of her songs in that category, with the info dropping down in the accordian. 

When the info drops down, I can't have that effect the menu on the left at all. So I figure the best way to do this is to put the menu in a separate section, then float the sections side by side. I know there's code fo this because I can do this with Squarekicker! But I'm hoping to just do it myself. 

Can anyone help?

You can follow this to make 2 sections side by side

Great thanks so much!

I also want to use a split section layout with two sections side by side and one sticky, or at least the two side-by-side sections can move independently of one another on the same page. I know there are plug-ins available to achieve this, but is there a way to do so without using plug-ins or script? I am currently on a Personal Plan and was hoping to use CSS code and code blocks to achieve this. 

On 8/1/2024 at 4:20 AM, Squaredspace said:

I also want to use a split section layout with two sections side by side and one sticky, or at least the two side-by-side sections can move independently of one another on the same page. I know there are plug-ins available to achieve this, but is there a way to do so without using plug-ins or script? I am currently on a Personal Plan and was hoping to use CSS code and code blocks to achieve this. 

You can use above guide then share link to page, I think I can give code to make a section sticky

@tuanphan

I have a split screen on this test webpage: 

https://ranunculus-fish-fhr3.squarespace.com/remediation/flowthrough

Password: K0B0LD2o24!

If this works, I'd like to possibly extend this idea of split screen with sticky sections to other webpages as well. 

On 8/6/2024 at 11:03 PM, Squaredspace said:

@tuanphan

I have a split screen on this test webpage: 

https://ranunculus-fish-fhr3.squarespace.com/remediation/flowthrough

Password: K0B0LD2o24!

If this works, I'd like to possibly extend this idea of split screen with sticky sections to other webpages as well. 

 

K0B0LD2o24!

password is incorrect

Ooops, sorry @tuanphan, the password is changed to 123abc. I finally managed to convince the company to upgrade to a business plan, if that helps with providing more flexible or advanced scripts. 

30 minutes ago, Squaredspace said:

if that helps with providing more flexible or advanced scripts. 

Having the business plan or above lifts some restrictions that SS imposes on plans below this level.

Of course it doesn't mean that all issues are solvable but it does mean that the site is more flexible to implement what solutions can be reasonably implemented.

Hey @creedon, I know what you mean. Ever since I started on this venture of building our corporate website, I've learned so much about what you can do and can't do, reasonably and unreasonably, on the Squarespace platform.

Hi @tuanphan, just checking in to see if you might have a code suggestion for my split section question?