How to make sidebar appear at the top of page on mobile

Support
#1

Hi there, I changed my page layout to put the sidebar/widgetbar on the left side of the page. I did this in hope that when the site is viewed on mobile, the sidebar would appear FIRST, at the top of the page.

However, this is not the case. The widget bar is still moved down to the bottom of the page. How can I fix this to put the sidebar at the top on mobile?

Thank you in advance,
JM

#2

Hi JM,

Please kindly add the CSS code below to Pro > Theme Options > CSS:

@media (max-width: 979px) {
    .x-container {
        display: flex;
        flex-flow: column wrap;
    }
    .x-container .x-sidebar {
        order: 1;
    }
    .x-container .x-main {
        order: 2;
    }
}

Thank you.

1 Like
#3

Hi @christopher.amirian,

Thank you for this! Now will this be global? How can I make it per page? For example if I only wanted to do it on two specific pages?

#4

Hi @SeekGod,

To make it take effect on per page, you can add the code in Cornerstone > CSS instead

Thanks

#5

Got it. Thanks! @paul.r

#6

You’re most welcome @SeekGod :slight_smile:

#7

Hi, so here’s another follow up question:

I decided I do need to make this global, but how can I exclude certain pages? Namely the Posts Page and all Posts

#8

Hello @SeekGod,

You can use Page or Post id to exclude specific pages and posts. To find out the page id, please take a look at following resource.

For more information, please take a look at following thread.

Thanks.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.