[Support request] Fixed scrollable full height sidebar and centered content

Home Forums Support [Support request] Fixed scrollable full height sidebar and centered content

Home Forums Support Fixed scrollable full height sidebar and centered content

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1130434


    I love GP and I’m using it for years to create the basic layout for my sites adding my CSS afterwards.

    Now I have a case where I am not sure which way is the most effective one to create the desired effect.

    I need a sidebar like this one: https://learn.getgrav.org/16/basics/what-is-grav
    So it is full height, scrollable and the main content is centered in the content section.

    What would be the best way to create that using GP Premium?
    I’m not sure how to start and I do not want to add too much CSS.
    Any smart ideas how to get that result?

    Thank you so much!

    Customer Support

    Hi there,

    i would probably begin with Sider from the Site Library:


    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).

    Customer Support

    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. ๐Ÿ™‚

    Customer Support

    So the layout in Sider is what you are after?

    If so set navigation location to float right first:

    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-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!

    Customer Support

    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. ๐Ÿ™‚

    Customer Support

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.