[Support request] Left sidebar fixed menu layout

Hi there,

theres a site titled Sider in the Site Library that displays a vertical header like that on Desktop:

https://gpsites.co/sider/

I think that would be a good starting place.

So you can add it to the Widet area, and that will be displayed below the menu.
If you then need that position to change eg. push it to the bottom of the side header then it will take some CSS.
If you can share a link to the site and let me know the specifics i can assist with that

Hi Jason,

The method you are using now (sider template) is suitable for shorter site header.

We can try another method to make it like this: https://www.screencast.com/t/R3H1Ueq3

Let me know if this is what you are looking for 🙂

Try to follow below steps:

1. Change this CSS:

body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 350px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
		background: linear-gradient(180deg, rgba(167,19,38,1) 0%, rgba(135,4,7,1) 100%);
	}

to:

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.site#page, .site-footer {
    width: calc( 100% - 350px);
}
.site-header {
		position: sticky;
		left: 0;
		top: 0;
		width: 350px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
		background: linear-gradient(180deg, rgba(167,19,38,1) 0%, rgba(135,4,7,1) 100%);
	}

Let me know if that works 🙂

In the .site-header CSS rule add this property;

min-height: 100vh;