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?

I sent you the link inside private information area.

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.

Hello,

Thank you, it worked!

Now, can it be possible to move the hamburger menu to the center of the screen, and the social icons to the bottom (like in your slideout theme)?

You could try this:

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

Awesome, it worked!

Thank you!

No problem!