Jump to content

Vertical navigation to the left

Go to solution Solved by MayaViolet,

Recommended Posts

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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment


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?



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

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

Link to comment
3 hours ago, WebShark said:


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!

Link to comment
  • Solution

@WebShark Ok, the first step would be to set your header style to "Fixed" as referenced here.

Then, try applying the follow CSS:


/*--- Header Navigation - Fixed Left ---*/

@media all and (min-width: 768px) {

/* Navigation Position */
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
    margin: 0;
position: fixed;
    left: 0;
    top: 100px;
width: 15vw;
.header-nav-list>div {
    white-space: inherit;

/* Page Content Width */
main#page {
    width: 85vw;
    margin-left: auto;


Lmk how that works!

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.