Fixed Sidebar Navigation

Are there any coding or tutorials to create a fixed sidebar navigation menu? I've found slide out and pop out menu plugins however I'm after a permanent fixed sidebar like this: http://www.wiseworkplacesolutions.com.au/

If you share link to your site, we can take a look

@tuanphan I haven't started the site yet, I'm just planning and looking to see whether this is possible. I see it was an option for a template in 7.0 but I'd much rather build in 7.1

Sidebars as a standard feature are only available in Squarespace 7.0. Wells and Five have sidebars for all pages, others for blogs only. Here is the list.

 https://support.squarespace.com/hc/en-us/articles/206544967-Sidebars-in-version-7-0

You can bulid one for 7.0 templates that don't have a sidebar, ( and most don't) and for 7.1. Here is a good tutorial on how to do both:

Thanks @derricksrandomviews but I'm actually after replacing the navigation so rather than having the navigation situated in the header, to instead have it on the side like this: http://www.wiseworkplacesolutions.com.au/ I'm guessing it's not possible unless I go to a 7.0 template.

I apologize, I misread your original post. Sidebar nav is a 7.0 feature.

These template families support sidebar navigation. Click the links to learn more.

• Aviator - Offset or Business Card layouts create a site-wide sidebar navigation
• Bedford - Sidebar navigation displays on pages in folders and index pages.
• Five - When you select Top Navigation Position: None, the navigation links move into the content sidebar.
• Supply - Site-wide navigation sidebar
• Wells - Site-wide navigation sidebar with editable content area

It can be done with 7.1  It takes  lot of code, the easiest way is to use this inexpensive plug in:

https://www.rebeccagracedesigns.com/plugins/p/vertical-navigation

Thanks @derricksrandomviews that's what I'm after! Have you seen any websites that currently have it installed?

Hey Emma, 

Did you ever use this plug in? If so can I take a look. I'm also looking for the same thing at the moment.

Hi,  has anyone solved this? I am looking to do a fixed navigation on the right like this

https://www.amazonicorestaurant.com/london/#top

Hi,  has anyone solved this? I am looking to do a fixed navigation on the right like this

https://www.amazonicorestaurant.com/london/#top

@tuanphan I found this code, which ads the navigation to the left and turns the text 90 degrees,

but I want the text to remain horizontal but on the right side of the site as per the example I sent

// Vertical Navigation //

.header-nav-list {
  width: 135vh !important;
  padding: 25px;
  background: #000000;
  position: fixed;
  -webkit-transform:rotate(-90deg)translateX(-85%);
  -webkit-transform-origin: top left;
  left: 0px;
  top: 0px;
  text-align: center;
  z-index: 999;
}

On 11/17/2022 at 3:11 AM, Leanie said:

Hi,  has anyone solved this? I am looking to do a fixed navigation on the right like this

https://www.amazonicorestaurant.com/london/#top

@tuanphan I found this code, which ads the navigation to the left and turns the text 90 degrees,

but I want the text to remain horizontal but on the right side of the site as per the example I sent

// Vertical Navigation //

.header-nav-list {
  width: 135vh !important;
  padding: 25px;
  background: #000000;
  position: fixed;
  -webkit-transform:rotate(-90deg)translateX(-85%);
  -webkit-transform-origin: top left;
  left: 0px;
  top: 0px;
  text-align: center;
  z-index: 999;
}

 

What is your site url? We can check easier

@tuanphan Hi there, is there an update to this question? Thanks!

On 12/4/2022 at 10:00 AM, mayah said:

@tuanphan Hi there, is there an update to this question? Thanks!

If you share link to your site, we can help easier

Hello, I am also curious about this. My website is here www.liamberrington.com and similar to the other requests I wish to have it at the side left like this site: https://www.mikezielinskie.com/

On 1/16/2023 at 4:21 PM, LiamBerrington said:

Hello, I am also curious about this. My website is here www.liamberrington.com and similar to the other requests I wish to have it at the side left like this site: https://www.mikezielinskie.com/

Try this code

I've done a social media sidebar on the left with this code:

https://www.minimist.ca/articles/how-to-add-floating-social-media-icons-to-squarespace-fluid-engine

This is an interesting site with a sidebar.

You can scroll down to the images and/or click on an image and a column of thumbnails opens up between the sidebar and the images. Pretty slick but possibly confusing with the scroll or click for the sidebar.

https://www.emmawebster.com/paintings