Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Navigation Side Bar 7.1


KariLivs

Recommended Posts

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!

Link to comment
  • Replies 17
  • Created
  • Last Reply

Top Posters In This Topic

  • 5 months later...

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

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

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...
  • 8 months later...

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! 

Link to comment
  • 7 months later...

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 🙂 

Screen Shot 2021-10-25 at 2.59.25 pm.png

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

Screen Shot 2021-10-25 at 2.59.25 pm.png

I 've made some Css code to arrange your header

image.thumb.png.f21b8434e52faafb95c8e041b1971a95.png

Does it meet your expect?

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

 

Link to comment
  • 3 months later...
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 

Screen Shot 2022-02-08 at 12.32.26 AM.png

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...