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

Sidebar Navigation (7.1) Stacking Navigation Links


Jordy_TheShop

Question

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

3 answers to this question

Recommended Posts

  • 1

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
  • 0
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
  • 0
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

Create an account or sign in to comment

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

×
×
  • Create New...