[Resolved] Place Element in sidebar above content when minimizing

Home Forums Support Place Element in sidebar above content when minimizing

  • This topic has 5 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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?

    #1463409
    David
    Staff
    Customer Support

    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%.

    #1463431
    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.

    #1463448
    David
    Staff
    Customer Support

    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;
        }
    }
    #1463454
    André

    Awesome! Greatest solution and fastest support ever!

    Thank you!

    #1463481
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.