- This topic has 5 replies, 2 voices, and was last updated 1 year, 9 months ago by
David.
-
AuthorPosts
-
September 29, 2020 at 2:21 am #1463359
André
Hi,
I created a sticky Hook Block Element, which I added to the left sidebar via the
generate_before_left_sidebar_content
. This is fine for desktops. If the window is resized or loaded with a smaller width, the sidebar moves below the main content. But I want to have it before the content. Can I define the sidebar to move on top of the main content, or do I have to create separate Block Elements and display them with CSS? I want to avoid the CSS solution and define where the sidebar moves on smaller widths.Further, I want the content in the sidebar in a single column. If that moves to the top of the content, it should be in two columns. I designed the Block Element with Generate Blocks Grid. But the result is that it is shown in one column if the sidebar moves below the main content and is offered in two columns if it is in the sidebar. I need it, vice versa.
How do I need to set up the sidebar for this?
September 29, 2020 at 2:59 am #1463409David
StaffCustomer SupportHi there,
this CSS will move the sidebar above the content on mobile:
@media(max-width: 768px) { .left-sidebar .site-content { display: flex; flex-direction: column-reverse; } }
In your Block Element – use a Grid Block to create a column Grid. Add your image to the first grid item, and your content to the second grid item.
In the Settings > Layout you can set each Grid item width to 100% for Desktop. And then select the Mobile ( and Tablet ) option and set the width to 50%.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 29, 2020 at 3:17 am #1463431André
Hi David,
Thanks, I was not aware of the grid settings. These now work exactly as I wanted. Great!
However, the
flex-direction: column-reverse;
breaks the layout resulting in colossal whitespace at the beginning and no sidebar.I tried this:
@media (min-width: 769px) { .left-sidebar .site-content { display: flex; flex-direction: column-reverse; } .inside-left-sidebar { position: sticky; position: -webkit-sticky; top: 150px; } }
It doesn’t matter if I enable or disable the sticky part.
September 29, 2020 at 3:26 am #1463448David
StaffCustomer SupportRemove your CSS and add this:
.left-sidebar .site-content { display: flex; } @media(max-width: 768px) { .left-sidebar .site-content { flex-direction: column-reverse; } } @media (min-width: 769px) { .inside-left-sidebar { position: sticky; position: -webkit-sticky; top: 150px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 29, 2020 at 3:28 am #1463454André
Awesome! Greatest solution and fastest support ever!
Thank you!
September 29, 2020 at 3:43 am #1463481David
StaffCustomer SupportGlad to be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.