Xstore sidebar - by nickson - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler

  • Avatar: nickson
    nickson
    Participant
    March 9, 2018 at 14:37

    Hello there, I have a question about the sidebar position.
    I have a woocommerce category menu wich is displayed in the sidebar on the left.

    Therefor I had to put it on the head sidebar but also on the shop sidebar. (wanted to display it everywhere.)

    On desktop this seems to work perfect.
    But on mobile and portrait mode tablet both menus act different.
    The sidebar menu on the homepage seems to jump to the bottom of the content, but the sidebar on the woocommerce shop pages stays on top of the content. The last one is preferred.

    how can I ajust css so that the homepage sidebar works (positions) the same as the shop sidebar on mobile devices. on top.

    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 9, 2018 at 14:52

    Hello,

    There is only “Sidebar position for mobile” option (Theme Options > E-commerce) for Products Page Layout (Shop, categories pages). But I’ve sent your request to our developers, maybe such option will be added for other pages also. Follow our changelog.

    Regards

    Avatar: nickson
    nickson
    Participant
    March 9, 2018 at 14:57

    Ahh, thanks. I see, so it is a feature for the shop page only.
    Would be great if that can be added to regular pages as well.

    For the meanwhile, I think this is a css trick, but I cant really find out how.
    Is there a small css trick wich I can use to adjust it manually?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 12, 2018 at 08:45

    Hello,

    You may use this custom css code:

    .sidebar-position-right >  .row .content, .sidebar-position-right > .row .content {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
        width: 100%;
    }
    .sidebar-position-right >  .row .sidebar, .sidebar-position-left > .row .sidebar {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        margin-top: 0;
    }
    .sidebar-position-right > .row, .sidebar-position-left > .row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    Regards

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.