Fixed scrollable full height sidebar and centered content

Hi there,

i would probably begin with Sider from the Site Library:

https://generatepress.com/site-library/#sider

Its 80% there already :)

Thank you. But I'd like to stay with the default GP, because I already created my design based on it (using the customizer and some custom css).

Can you provide a link to the site so i can see what you currently have?
You can edit your original topic and use the Site URL field to share it privately.

It's the same basic layout like here: https://www.zitateundsprueche.com/sprueche/
I just want to use the best start and maybe you know a GP configuration which makes sense. :)

So the layout in Sider is what you are after?

If so set navigation location to float right first:
https://docs.generatepress.com/article/navigation-location/

Then try adding this CSS from Sider

@media (min-width: 1000px) {
	body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 300px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.site-branding,
.site-logo {
	order: 1;
}

.header-widget {
	order: 3;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 30px;
	margin-bottom: 50px;
}

.nav-float-right .header-widget {
	float: none;
	top: auto;
	max-width: 100%;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

Ah, that's a good start.
Too bad I need to use the "real" sidebar.
I have to find my own way, then.
Thank you!

If the design needs to be like this: https://learn.getgrav.org/16/basics/what-is-grav - can you explain:

Too bad I need to use the “real” sidebar.

I only need the style of the sidebar itself - it does not need to be only the menu.
I have three widgets, that need to be placed inside that fixed sidebar. :-)

The Sider sites uses the Header Widget area to add the Social Icons and the Sign Up form - so you can do what a Sidebar does with the benefit it includes the Site Identity

I was wondering if anybody ever figured out how to make the left sidebar scrollable?
The solution with a left-side navbar is an option but it changes the whole layout of a site.

The scrollable sidebar is used a lot for page summaries or Table of Contents. A good example is Google Docs, Jasper AI website, etc. I have provided links to some screenshots. Jasper is using not one but two left scrollable sidebars.

I have a pretty good knowledge of CSS, but even I could not implement it on GP.

• Google Docs example:
• Jasper AI example

My Website Link

Any help would be appreciated.

Just wanted to add:
Google Docs left sidebar with default Content Summary is amazing. I'd love to re-create its functionality and style on my current GP version. I have researched ways to do it, but there's nothing available. I tried copying Google Docs styles and using them for my sidebar. It worked partially, but I could never duplicate it.
Now I just can't afford to spend any more time on this cool detail. I'd love to have it though.
Thanks for listening.

Can you open a new topic for your question?

Thanks.

Sure. Doing right now