[Share] Stack Navigation Vertically

You can use these CSS code to make Navigation stack vertically.

#1. Stack Navigation on Right side

nav.header-nav-list {
    flex-direction: column;
}

result

#2. Stack Navigation on Left Side

div.header-display-desktop {
nav.header-nav-list {
    flex-direction: column;
}
div.header-title-nav-wrapper {
    flex-direction:row-reverse;
}
.header-nav {
    text-align: left !important;
    padding: 0px !important;
}
nav.header-nav-list div {
    margin-left: 0px !important;
}}

#3. Stack Navigation under Logo/Site Title

div.header-display-desktop {
nav.header-nav-list {
    flex-direction: column;
}
div.header-title-nav-wrapper {
    flex-direction:column;
}
.header-nav {
    text-align: center !important;
    padding: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
nav.header-nav-list div {
    margin-left: 0px !important;
}}

#4. Stack Navigation above Logo/Site Title

div.header-display-desktop {
nav.header-nav-list {
    flex-direction: column;
}
div.header-title-nav-wrapper {
    flex-direction:column-reverse;
}
.header-nav {
    text-align: center !important;
    padding: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
nav.header-nav-list div {
    margin-left: 0px !important;
}}

#5. Stack Navigation in bottom right of site

div.header-display-desktop {
nav.header-nav-list {
    flex-direction: column;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}}

#6. Stack Navigation in bottom left of site

div.header-display-desktop {
nav.header-nav-list {
    flex-direction: column;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}
nav.header-nav-list * {
    text-align: left !important;
    margin: unset !important;
}}