Place Element in sidebar above content when minimizing

[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?

[David]

Hi 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/

[André]

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.

[David]

Remove 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/

[André]

Awesome! Greatest solution and fastest support ever!

Thank you!

[David]

Glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts