how to built a vertical menu as a sidebar (and not as a header) ?

Site URL: https://gecko-flugelhorn-am5r.squarespace.com/

Hello everyone ! 

I tried to find some information on this forum but I only found partial answers. 

I began to use the Balboa template.

My goal would be to have a vertical menu. Not only vertical in a header staying at the head of the page but as a fixed sidebar stayling left during the scrolling on the page content (I hope it is clear). To be clearer, I added a screen shot of my old website to keep it more understandable. 

I saw that some templates naturally does this kind of things. I tried bedford but didn't find the place to create a side menu.  The best template (Supply) for that seems to be uavailable now.

have you got any solution ?

Many thanks for who could help me ! Have a nice day ! 😉

Greg

You didn't post what template you are using, or allow us to view your site so we have  to guess to provide you with possible solutions. Some 7.0 templates have a sidebar nav as a style option, some like Wells, the sidebar is there by default. If you are using 7.1 that will take some code, a plugin, to make a sidebar menu and you will need a business plan to do that. If you are still in a trial period I think using wells is your best option:

https://wells-demo.squarespace.com/

This template has the sidebar navigation option as well. It is not set that way in the demo but  it is a one click option basically.

https://five-demo.squarespace.com/

Hello Derrick and thank you for answer me. As you guessed, I'm still in a trial period.
I began by Balboa template but I'm discovering squarspace and change all the template now isn't a problem.
I'll take a look at the templates you purposed me. 
thank you again !

but not an option for 7.1?

On 3/2/2021 at 1:29 AM, kakers said:

but not an option for 7.1?

Hi. I solved this for a client. There is also a course on this.

Do you still need help on this?

Hi !

I am still looking for an answer as I would like to have a sidebar as well but the Wells template is not available anymore. Do you have a solution for having a sidebar in Squarespace 7.1. ? 

Thanks

Wells is still available in 7.0 as is Wexley and Avenue, all have sidebars. Ther are others also, here is a guide and it explains the sidebar for each template that provides one, majority only blog pages. Wells, Five can have a sidebar for  all pages. You can start a trial from any demo page. 

https://support.squarespace.com/hc/en-us/articles/206544967-Editing-sidebars

https://wells-demo.squarespace.com/

https://five-demo.squarespace.com/

On 3/6/2021 at 7:29 AM, tuanphan said:

Hi. I solved this for a client. There is also a course on this.

Do you still need help on this?

 

Hi, 

I am in my trial period, building a site on version 7.1.

I am looking for code to insert for a vertical sidebar as discussed in this thread. Are you able to share how you solved this in the past, please? Or share a link to the course..

Thank you so much!

On 11/23/2021 at 4:25 AM, SAKAMEA said:

Hi, 

I am in my trial period, building a site on version 7.1.

I am looking for code to insert for a vertical sidebar as discussed in this thread. Are you able to share how you solved this in the past, please? Or share a link to the course..

Thank you so much!

 

Hi. Do you still need this?

3 hours ago, tuanphan said:

Hi. Do you still need this?

I do!

I need it too!

On 3/6/2021 at 4:29 AM, tuanphan said:

Hi. I solved this for a client. There is also a course on this.

Do you still need help on this?

 

Yes, please!

11 hours ago, KristenRuthSmith said:

Yes, please!

You can follow this course: https://rebeccagracedesigns.teachable.com/p/vertical-navigation

Same. Spent the last 2 weeks trying to figure out how i can get something similar to the wells layout. All i want is for the navigation bar to go to the left. 

Same here.  Going from Wells in 7.0 to starting a blog and realizing it's time to update to 7.1 .

I miss the Wells layout!  It worked perfectly for me.

On 7/2/2023 at 12:33 AM, James-C said:

Same here.  Going from Wells in 7.0 to starting a blog and realizing it's time to update to 7.1 .

I miss the Wells layout!  It worked perfectly for me.

If you share site url, we can give code to move header to left, same as Well template

On 7/3/2023 at 2:32 AM, tuanphan said:

If you share site url, we can give code to move header to left, same as Well template

www.pmdengineer.com

Thanks!

On 7/7/2023 at 10:16 AM, James-C said:

www.pmdengineer.com

Thanks!

Add to Design > Custom CSS

/* Float header */
@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 50%;
    left: 5vw;
    padding: 0 !important;
    transform: translateY(-50%);
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section.page-section {
    max-width: 75%;
    margin-left: 25%;
    padding-top: 0 !important;
}
}

Hi there! 

I just tried pasting it to my 7.1 site, and this last code worked great, thank you!

A few of the navbar menu items are folders for me though, with a few pages nested underneath (ie shop or gallery). With this code ^ when I hover over the menu (which is a folder), the menu options appear underneath – but overlap the rest of the navbar. 

Is there code that can be added into this, to automatically shift the menu down to accommodate folder contents? 

Really appreciate your help!

On 1/2/2024 at 7:59 AM, aevesam said:

Hi there! 

I just tried pasting it to my 7.1 site, and this last code worked great, thank you!

A few of the navbar menu items are folders for me though, with a few pages nested underneath (ie shop or gallery). With this code ^ when I hover over the menu (which is a folder), the menu options appear underneath – but overlap the rest of the navbar. 

Is there code that can be added into this, to automatically shift the menu down to accommodate folder contents? 

Really appreciate your help!

Can you share link to site? We can adjust easier

On 7/9/2023 at 3:54 PM, tuanphan said:

Add to Design > Custom CSS

/* Float header */
@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 50%;
    left: 5vw;
    padding: 0 !important;
    transform: translateY(-50%);
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section {
    max-width: 75%;
    margin-left: 25%;
    padding-top: 0 !important;
}
}

 

Hi @tuanphan

I used this code and altered it a bit (loving it! ty!) Alhough i'm having issue with the product page because of the #page article section 

Is there a way we can fix this?

Sorry, I forgot to add the link!

tidesstudio.squarespace.com

Password: tides

On 3/24/2024 at 1:25 PM, isabellewarren said:

Hi @tuanphan

I used this code and altered it a bit (loving it! ty!) Alhough i'm having issue with the product page because of the #page article section 

Is there a way we can fix this?

 

Sorry, I forgot to add the link!

tidesstudio.squarespace.com

Password: tides

What is problem? You want to disable #page article on product page or?

Hi @tuanphan

Here's a screenshot of how the product display page looks (it's affected by the code I quoted above).

Here's a link to the shop page: https://tidesstudio.squarespace.com/the-brand-shop/p/style-01-ej5na-jk49s

Password: tides

Updated the code.