Left align nav item text

Site URL: https://www.bloom-skin-aesthetics.squarespace.com

Hi, I am in need of a bit of help here. I am trying to establish a left hand sidebar navigation (rather than the top-horizontal layout currently included on my template). I have managed to get the navigation to sit over on the left side of the screen just below the logo, however I cannot get the Nav text to sit left-aligned (only the nav folder items). Can anyone help with this?

Also is there a way to have this nav/menu disappear on scroll - stuck to the top of the page rather than being a scrolling overlay?

This is what I have put together based on different threads I found - not sure if it is all relevant:

/*vertical navigation*/
.header-nav {
width:1%;
position: fixed;
  padding-top: 15%;
z-index: 1000;
  text-align: left !important;
}

/*nav text alignment*/
.header-nav-list a { text-align: left !important;}
.header-nav-item a {text-align: left !important;}
.header-nav-item--collection a {text-align: left !important;}

Website: bloom-skin-aesthetics.squarespace.com
P/word: Leah2022!

  Add this to your Custom CSS (you may be able to condense into what you already have)

.header-layout-nav-right .header-nav-list {
    justify-content: flex-start;
}
.header-layout-nav-right .header-nav {
  padding-left:0px;
}
.header-nav {
    top: 40px;
}
.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 0vw;
}

Please let me know if this works!

On 10/6/2022 at 11:56 PM, Ziggy said:

  Add this to your Custom CSS (you may be able to condense into what you already have)

.header-layout-nav-right .header-nav-list {
    justify-content: flex-start;
}
.header-layout-nav-right .header-nav {
  padding-left:0px;
}
.header-nav {
    top: 40px;
}
.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 0vw;
}

Please let me know if this works!

Hi @Ziggy  Thank you for your help on this one 🙂  I have added the code and tweaked the padding to enable the nav to sit just below the logo - It worked great apart from the folder dropdown visibility - Unfortunately the folder items are popping up off to the left side of the screen when I hover over them - Is there any way to edit this to have them appear in line/over the nav menu?

Also is there anyway to have it disappear on scroll? At the moment it is a permanent/floating menu