Getting Navigation to stack vertically

Site URL: https://dandelion-point-jf6c.squarespace.com/config/

Hi,

I am working on the below website. We would like the navigation to stack vertically in the right hand corner so it looks like this.

Password: Amalie

Hi @AmalieCharlesworth Add to Design > Custom CSS

/* Stack navigation */
nav.header-nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

Thanks for this code @tuanphan, I just added this to my site too.

I am trying to vertically stack the navigation on the left side, centered under the logo. Is this possible?

https://grasshopper-khaki-zhg3.squarespace.com

password:  bhco

On 4/15/2021 at 2:32 AM, wagneric said:

Thanks for this code @tuanphan, I just added this to my site too.

I am trying to vertically stack the navigation on the left side, centered under the logo. Is this possible?

https://grasshopper-khaki-zhg3.squarespace.com

password:  bhco

Add to Design > Custom CSS

/* Header layout */
.header-title-nav-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}
.header-nav {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-align: left !important;
}
.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 0 !important;
}

@tuanphan  Thank you very much. I tried this, but the links are all displaying on the same line. Did I do something wrong?

On 4/19/2021 at 11:25 AM, wagneric said:

@tuanphan  Thank you very much. I tried this, but the links are all displaying on the same line. Did I do something wrong?

 

Hey how did you get it to look like that ?? 

Thank you!

19 minutes ago, sce said:

Hey how did you get it to look like that ?? 

Thank you!

Can you share link to your site? We can take a look

On 4/19/2021 at 8:25 AM, wagneric said:

@tuanphan  Thank you very much. I tried this, but the links are all displaying on the same line. Did I do something wrong?

 

Sorry, missing your comment. Do you still need help?

On 4/19/2021 at 11:25 AM, wagneric said:

@tuanphan  I am still building my site but the the link is as follows.

https://clover-gardenia-s9l6.squarespace.com/config/

I put the same code that you gave above but the menus (portraits, corporate, etc) are all horizontal under the website title, I would like them to appear vertical, so it looks like this 

https://grasshopper-khaki-zhg3.squarespace.com/

The code I put in is as follows - however the menu items are still horizontal under the website name , not vertical.

/* Header layout */
.header-title-nav-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}
.header-nav {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-align: left !important;
}
.header-layout-nav-right .header-nav-item:not(:first-child):not(.header-actions-action--cart) {
    margin-left: 0 !important;

Thank you.

 

 

On 6/8/2021 at 5:36 PM, sce said:

 

The site is private. Can you setup password & share url again?

https://clover-gardenia-s9l6.squarespace.com/?noredirect

18 hours ago, charlineca said:

Hi @tuanphan, I am trying to stack my navigation but is there any way to split the links between left and right side? I have 5 navigation links, I want to stack the first 3 on the left side and the last 2 on the right side of the logo. I have used the above code, but it only stacks on the left.

 

MY page is https://rabbit-orchid-h7nk.squarespace.com/, pw is squarespace.

Don't remove any code in your current code

Add to Design > Custom CSS

nav.header-nav-list>div:nth-child(n+4) {
    position: absolute;
    right: 0vw;
    bottom: 0;
}
nav.header-nav-list>div:nth-child(4) {
    bottom: 2vw;
}

23 hours ago, charlineca said:

Thanks! They are however not aligned - the right side links are not in one line (our Story is a little more to the left) and also they are not aligned with the left links - should be aligned at top. Can you help with this? Thanks!

 

Also, do you mind just removing the screenshot?

Use this new code

nav.header-nav-list>div:nth-child(n+4) {
    position: absolute;
    right: 0;
    bottom: 0;
}
nav.header-nav-list>div:nth-child(4) {
    right: 0vw;
    top: 0;
}
nav.header-nav-list>div:nth-child(5) {
    right: 5px;
}