[Resolved] Fixed scrollable full height sidebar and centered content

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

Home Forums Support Fixed scrollable full height sidebar and centered content

Viewing 14 posts - 1 through 14 (of 14 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

    #2239666
    Alexander

    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.

    My Website Link

    Any help would be appreciated.

    #2239678
    Alexander

    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.

    #2239690
    Leo
    Staff
    Customer Support

    Can you open a new topic for your question?

    Thanks.

    #2239813
    Alexander

    Sure. Doing right now

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