Jump to content

Fixed Sidebar Navigation

Recommended Posts

  • organic_emma changed the title to Fixed Sidebar Navigation

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:

 

Edited by derricksrandomviews
Link to comment

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

 

Edited by derricksrandomviews
Link to comment
  • 4 months later...
  • 1 month later...

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;
}

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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.