Vertical navigation to the left

Hello

Is it possible to have the navigation vertical and left-aligned? 

I only have access to CSS 🙂

Thank you very much in advance!

If you want it to be a "true" navigation, i.e. accessible for screen readers etc, you're going to need a fair bit of CSS and it's going to be a bit of a headache tbh. You could try something like Rebecca Grace's code but it may not be what you're looking for.

Do you have an example + site url? We can help easier

Hello

Thank you to your both! I tried with Rebecca Grace's code and it almost worked! However it made the whole header go vertical and not just the navigation. The navigation should also be left-aligned. Do you know what to change in the code?

Code:

@media only screen and (min-width: 991px) {
  .page-section:first-of-type {
    padding-top: 0px !important;
  }
  .page-section {
    margin-right: 100px;
  }
  #header {
    width: 100px;
    position: fixed;
    height: 100vh;
    z-index: 99999 !important;
    display: table;
    writing-mode: vertical;
    text-orientation: mixed;
  }
  .header .header-announcement-bar-wrapper {
    padding: 10px 30px 10px 10px;
  }
  .header-inner {
    height: 100vh;
    display: table-cell;
    vertical-align: middle;
    text-align: left; /* Add this line to align the text to the left */
  }
}

The url is https://porpoise-keyboard-td6m.squarespace.com/ and pw is squarespace

Thank you very much! Have a nice day 🙂

You mean do this?

Yes exactly! That should be as a left navigation instead and also left-aligned 🙂

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
flex: 0 0 100%;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
    text-align: left;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-list {
    justify-content: left;
    flex-direction: column;
    text-align: left;
}

Try the above - Not sure if that is your final preferred outcome?

(you may need to apply "!important" after the properties if the code isn't sticking)

Hi! 

Thank you very much! This is so close to what we wish for!

The navigation should be going more down the site to the left. I did not really describe this well before, I am sorry. Is this solution possible? 🙂 Thank you once again!

3 hours ago, WebShark said:

Hi! 

Thank you very much! This is so close to what we wish for!

The navigation should be going more down the site to the left. I did not really describe this well before, I am sorry. Is this solution possible? 🙂 Thank you once again!

Yes, solution is definitely possible but I think we need to clarify a few more design details first 🙂

Do you want the navigation to sit fixed on the left side of your site content, meaning it stays present even as users scroll down the page? To do so, we would need to target the header-nav and place it on the left side, but also add a left-margin to the entire site's page content, so they don't overlap.

If you can provide your big-picture vision, that would help us be able to develop and share accurate code!

Hello, thank you very much for your response! It would be nice with a sticky left navigation 🙂 Please let me know if you need anything more from me! 🙂 

Yes, this worked, thank you so much! 🙌 Take care! 🙂 

i want to do this to my site too. where are you inputting that code?

43 minutes ago, NashJ said:

i want to do this to my site too. where are you inputting that code?

@NashJ you can follow these instructions to access the CSS editor:
https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor

On 8/9/2024 at 6:51 PM, NashJ said:

i want to do this to my site too. where are you inputting that code?

@NashJ The CSS in the accepted solution requires the header style with centred branding to be active. If you have chosen a different header layout, you'll need to remove .header-layout-branding-center-nav-center from the selectors.

Hello @MayaViolet and @paul2009

Im trying to adapt this code to a site, I need help with the Desktop version in order to:

- Align of the Logo to the left of the page
- Menu items aligned with the start of the logo (learn how to move them up, down, left or right.)
- Set the same background color of the site (I get by default white)

Here is a test site:

https://hughgordon-test.squarespace.com
Password: 2024

On 9/29/2024 at 3:39 AM, jjohansson said:

This is the Menu ubication im looking for... 

Try this to Website Tools > Custom CSS

@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 2vw;
    z-index: 9999;
    text-align: left !important;
}
.header-nav {
    position: fixed;
    top: 10vw;
    left: 2vw;
    padding: 0 !important;
}
  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;
}
header#header {
    background-color: transparent !important;
}
}

Also, when I used the code above, it squished everything else on my page over to the right. I want the navigation to exist over my section if possible? Laid on top of it versus next to it.

On 10/7/2024 at 10:19 PM, recycledfashion said:

Hello, 

 

I am trying to do the exact same thing to my website.

I would like a vertical, left aligned navigation menu.

It seems like I've tried every code on every forum, but none have worked and there's no squarespace template with a left aligned navigation menu in 7.1, frustratingly. If there is one, I'd love to know!

 

I used text blocks to show what it should look like.

 

When I tried the code above, this is what happened, shown in the second image. There is white space behid the navigation and the navigation titles are spread apart strangely. 

The third image shows what the site's navigation currently looks like.

 

Can you share site url?

On 10/7/2024 at 10:21 PM, recycledfashion said:

Also, when I used the code above, it squished everything else on my page over to the right. I want the navigation to exist over my section if possible? Laid on top of it versus next to it.

You can remove this code