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! 🙂