Archived topic
Sidebar and Sections - Stick Sections on Left to Right Side of Sidebar
7 replies · Started by Mary Pearson on May 18, 2018
I have figured out how to use sections with a sidebar, but the sections slide under the sidebar when I change window size. I want it to be responsive, but when the main content gets hidden under the sidebar, that isn't good.
The left sidebar is static.
How do I make the sections "stick" to the sidebar?
Thanks!
Hi Mary,
have you checked out the GP Sites Navigator and Sider?
They create an aside header, to give you the same result and are Sections compatible.
Advisable on a clean install but you can import them without the content if you wish then its just a case of populating the navigation and header as if it were a normal page.
I had never heard of either so I downloaded and installed both, but I'm sorry, I don't know how to use them.
Is there anyone who can help me with some custom CSS to make my sections content "stick" to my sidebar please.
Website is https://mpearson.ca/
Thank you.
You can try adding this CSS:
@media (min-width: 769px) {
body {
margin-left: 300px;
}
#primary {
left: 0;
}
.inside-left-sidebar {
width: 300px;
}
}
Make sure all of your sidebar CSS is inside that media query, or your site might look messed up on mobile.
Thank you so much Tom! That worked, except that the page has a lot of white space on the right side.
I have tried adjusting content size in customizer with no change.
I have tried several CSS codes that I have found in support forums, but no change.
Page Builder Container is set to Full Width.
Sections Box Type and Inner Box Type are both set to Full Width.
What am I missing?
Thank you David for sharing https://gpsites.co/navigator/ and https://gpsites.co/sider/
I was unaware of this library. Certainly a goldmine.
I created a new account and install to try them out. Was working on it when Tom gave me the above CSS which is the way I'm going now, but I will definitely look into these skins further.
Thank you again!
You're very welcome Mary. Enjoy the Sites library!
Closing this topic as resolved.