Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Getting Navigation to stack vertically


Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add to Design > Custom CSS /* Header layout */ .header-title-nav-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; f

Posted Images

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;
}

 

Link to post
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;
}

image.thumb.png.fbc181d5c719442ed69230616e7a0a9e.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...