[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
    Posts
  • #1130434
    timo

    Hello!

    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!

    #1130463
    David
    Staff
    Customer Support

    Hi there,

    i would probably begin with Sider from the Site Library:

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

    Its 80% there already πŸ™‚

    #1130657
    timo

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

    #1130746
    David
    Staff
    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.

    #1131017
    timo

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

    #1131045
    Leo
    Staff
    Customer Support

    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;
    }
    #1132805
    timo

    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!

    #1132823
    David
    Staff
    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.

    #1132830
    timo

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

    #1133076
    David
    Staff
    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.