Navigation Side Bar 7.1

Hello! Pardon me if this has already been asked before, but is there a way to move the navigation to the side instead of on top in 7.1, or to create a hamburger menu? I find the simple layout, though effective, is very restrictive in terms of creating original designs. Would I just CSS to style the navigation instead? I hope this is something that is going to be developed in the near future!

Can you share link to your site?

I have the same question. I thought I could change templates but I've spent 2 days building the site before realising that 7.1 will not allow this. I either need to add more space across the top navigation section- somehow-or it seems I need to start again.

Plus adding tables looks like I will need to use a code generator. I  joined Squarespace to get away from my rudimentary knowledge of Dreamweaver- not happy! And I can't seem to remove excess spacing between sections- S,M,L isn't enough

yellow-turquoise-4raf.squarespace.com

On 6/3/2020 at 12:10 PM, VMoritz said:

I have the same question. I thought I could change templates but I've spent 2 days building the site before realising that 7.1 will not allow this. I either need to add more space across the top navigation section- somehow-or it seems I need to start again.

Plus adding tables looks like I will need to use a code generator. I  joined Squarespace to get away from my rudimentary knowledge of Dreamweaver- not happy! And I can't seem to remove excess spacing between sections- S,M,L isn't enough

yellow-turquoise-4raf.squarespace.com

Your site is private. Can you setup password & share url?

Site URL: https://www.commun.space/

Hey, 

I really need a navigation side bar to link my content on a specific page of my site. Is there a way to do this in 7.1?

Thanks!!

Only on one page? I doubt it. 

Site URL: https://www.laurendenitzio.com

I'm currently using the Wells theme in 7.0 and the mobile menu is terrible for my current navigation setup. I wanted to switch to 7.1 to have more options to customize the mobile nav, but I don't see any easy way to have a sidebar navigation like there is in Wells. Is it possible to do that without a lot of coding? I'm capable of doing that, but am pretty annoyed that I'm having to rebuild an entire site AND custom code a side nav just to get a mobile navigation display that's not awful.

I basically just want to build a site using 7.1 that looks like my current site but with a mobile navigation that will collapse folders. Thank you! Any help would be much appreciated! 

1 minute ago, bangank36 said:

Try this article with pure css help

Vertical Navigation in Squarespace 7.1 | Rebecca Grace (rebeccagracedesigns.com)

Thanks for the link but I actually want a sidebar and not a vertical menu. I'd like the text displayed horizontally as it normally is, but stacked on top of each other like a list. 

Hi there,

I'm trying to create a Sidebar Nav in 7.1. The way I'm approaching this is by using a Transparent Fixed Header with all nav links in the header left aligned. 

I'm almost there, however the final issue I have is I need to 'stack' the navigation elements down the side so the sidebar doesn't overlap the page content. I'm building this effect to be on desktop and tablet only. 

Site URL: carnation-parsnip-br2g.squarespace.com

PW: abc123

I've got the following code so far: 

//HEADER STYLING START//
.header-title-text {
    text-align: left;
}

.header-title-nav-wrapper {
    margin-left: 0 !important;
}
.header-nav {
    text-align: left !important;
}

@media screen and (min-width: 800px) {

  .header {
  background: transparent!important;
}
}
//HEADER STYLING END//

Any help would be much appreciated, and if anyone has any comments on the functionality or better ways to achieve this look please let me know – I'm still new to CSS. 

Thanks,

Jordy 🙂 

On 10/25/2021 at 11:31 AM, Jordy_TheShop said:

Hi there,

I'm trying to create a Sidebar Nav in 7.1. The way I'm approaching this is by using a Transparent Fixed Header with all nav links in the header left aligned. 

I'm almost there, however the final issue I have is I need to 'stack' the navigation elements down the side so the sidebar doesn't overlap the page content. I'm building this effect to be on desktop and tablet only. 

Site URL: carnation-parsnip-br2g.squarespace.com

PW: abc123

 

I've got the following code so far: 

//HEADER STYLING START//
.header-title-text {
    text-align: left;
}

.header-title-nav-wrapper {
    margin-left: 0 !important;
}
.header-nav {
    text-align: left !important;
}

@media screen and (min-width: 800px) {

  .header {
  background: transparent!important;
}
}
//HEADER STYLING END//

 

Any help would be much appreciated, and if anyone has any comments on the functionality or better ways to achieve this look please let me know – I'm still new to CSS. 

Thanks,

Jordy 🙂 

I 've made some Css code to arrange your header

Does it meet your expect?

If it 's your desired result, you can add the following codes to Home > Design > Custom Css

@media only screen and (min-width: 800px) {
  .header-announcement-bar-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px !important;
    padding-right: 0 !important;
  }
  .header-display-desktop {
    display: block;
  }

  .header-nav .header-nav-list {
    flex-direction: column;
  }  
}

Let me know if it works property on your site

Support me by pressing 👍 if this useful for you

On 10/26/2021 at 5:15 PM, bangank36 said:

If it 's your desired result, you can add the following codes to Home > Design > Custom Css

@media only screen and (min-width: 800px) {
  .header-announcement-bar-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px !important;
    padding-right: 0 !important;
  }
  .header-display-desktop {
    display: block;
  }

  .header-nav .header-nav-list {
    flex-direction: column;
  }  
}

Let me know if it works property on your site

Support me by pressing 👍 if this useful for you

Hey! Thanks for your help.

I managed to solve the problem by using a section of your code. This is the part I used:

@media only screen and (min-width: 768px) {
  .header-nav .header-nav-list {
    flex-direction: column;
  }  
}

When I used the rest of the code, the header items were pushed over to the left of page even on larger monitors. As the rest of the website content width is quite narrow, this looked a little off (I preferred to keep the header width narrow as well).

I hope this makes sense – in summary your code helped solve my issue.

Thanks,

Jordy!

I'm wondering if there is any way to create a fixed side navigation menu that is somewhat similar to the one on http://amberinteriordesign.com/ in 7.1?

Thanks!

Hi. Fixed site navigation or fixed site navigation + burger effect? (click burger >> nav appear)?

Why isn't anyone helping with this issue of a side navigation for 7.1? There are many forum posts asking this same question and no one ever answers. 

How do you get a left side navigation on 7.1?  I'd like on all pages for https://www.tribeandsol.com 

On 3/22/2021 at 9:24 PM, LaurenD said:

Thanks for the link but I actually want a sidebar and not a vertical menu. I'd like the text displayed horizontally as it normally is, but stacked on top of each other like a list. 

I've been trying to figure out the same and can't seem to find a plug in or help. The question is never answered in many forum posts. Trying to achieve this for https://www.tribeandsol.com 

Hi, 

I also need help with the above same as you mentioned for https://www.tribeandsol.com 

On 2/8/2022 at 2:00 PM, MoonMama said:

Hi, 

I'm needing help with the same but this code didn't work for me https://www.tribeandsol.com

Do you still need help? I remember there is a course on this

Hi @tuanphan, could you please share the code or course to learn how to move the main navigation to the left side of the page in squarespace 7.1? I've patched together a code that mostly achieves this, but it isn't fully creating the look I want. I'm still learning how to understand and manipulate code, so I appreciate any assistance in this matter!

9 hours ago, EmilyDo said:

Hi @tuanphan, could you please share the code or course to learn how to move the main navigation to the left side of the page in squarespace 7.1? I've patched together a code that mostly achieves this, but it isn't fully creating the look I want. I'm still learning how to understand and manipulate code, so I appreciate any assistance in this matter!

See this

https://rebeccagracedesigns.teachable.com/p/vertical-navigation

Why are people gate keeping something so simple? Tumblr has been doing this forever. What's going on Squarespace come oooooooooon.