Hi,
We can copy the style created from our very own Slideout theme from Site Library. https://gpsites.co/slideout/
/* GeneratePress Site CSS */ /* Side menu CSS */
@media (min-width: 769px) {
body {
padding-left: 60px;
}
}
#site-navigation {
position: fixed;
left: 0;
min-height: 100vh;
max-width: 60px;
overflow: hidden;
}
#content {
padding: 40px;
}
#main,
.sidebar > .inside-right-sidebar,
.sidebar > .inside-left-sidebar{
margin-top: 0;
margin-bottom: 0;
}
#site-navigation .main-nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.admin-bar #site-navigation .main-nav > ul {
min-height: calc(100vh - 32px);
}
.slideout-toggle {
-webkit-box-ordinal-group: -9;
-ms-flex-order: -10;
order: -10;
}
#site-navigation .rotate {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-bottom: auto;
white-space: nowrap;
}
@media (max-width: 768px) {
#site-navigation .menu-toggle {
display: none;
}
}
.site-footer {
padding: 0 40px;
box-sizing: border-box;
}
Also, make sure to add rotate
class to your menu items on Appearance > Menu
so the display vertically on the side.
Let us know if it works for you.