- This topic has 13 replies, 2 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
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!
Customer Support
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. 🙂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; }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.
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
- You must be logged in to reply to this topic.
