[Resolved] Top bar with Off canvas hamburger menu – move it to a sidebar

Hi there,

not sure about that. Do you have a site with the layout in place so i can take a look?

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.

You could try this:

li.slideout-toggle {
    margin-top: auto;
    margin-bottom: auto;
}

No problem!