sidebar mobile display | PenciDesign Support

shirleydt replied

5 years ago

Customer Reply

Awesome! Thank you so much! - Shirley

PenciDesign replied

5 years ago

Staff Reply

Hi,

If so, you can change the code I sent to this code:

@media only screen and (max-width: 767px){
body.page-id-6719 .container.penci_sidebar{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; }
body.page-id-6719 .container.penci_sidebar #main{ order: 2; }
body.page-id-6719 .container.penci_sidebar .penci-sidebar-content{ order: 1; }
}

Note important:

- Change the all numbers 6719 on the above code to the ID of the page you want to display sidebar first on mobile.

You can check this guide to know how to find ID of a page.

- If you want to allow more pages ( example pages have IDs are: 6719, 6666, 7777 ) to display sidebar first on mobile, you can change the code I sent to the code like that:

@media only screen and (max-width: 767px){
body.page-id-6719 .container.penci_sidebar,
body.page-id-6666 .container.penci_sidebar,
body.page-id-7777 .container.penci_sidebar{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; }
body.page-id-6719 .container.penci_sidebar #main,
body.page-id-6666 .container.penci_sidebar #main,
body.page-id-7777 .container.penci_sidebar #main{ order: 2; }
body.page-id-6719 .container.penci_sidebar .penci-sidebar-content,
body.page-id-6666 .container.penci_sidebar .penci-sidebar-content,
body.page-id-7777 .container.penci_sidebar .penci-sidebar-content{ order: 1; }
}

Best Regards,

PenciDesign

shirleydt replied

5 years ago

Customer Reply

Hi there, I wonder whether it is possible to have a certain sidebar display first and other display later. For instance, my homepage main sidebar I'd like it to display later if possible so that when users click a post they will see that post on the screen instead of having to scroll down all the way to see the post.

For the sidebar used for facet purpose, all are left-side sidebars, customize sidebar 1 & 2, I'd like them to display later.

Is it possible? Many thanks! - Shirley

shirleydt replied

5 years ago

Customer Reply

Perfect! Thank you so much for your prompt & effective response. Greatly appreciate it!

PenciDesign replied

5 years ago

Staff Reply

Hi,

Ahh, sorry, please try replacing the code I sent to this code:

@media only screen and (max-width: 767px){
.container.penci_sidebar{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; }
.container.penci_sidebar #main{ order: 2; }
.container.penci_sidebar .penci-sidebar-content{ order: 1; }
}

Best Regards,

PenciDesign

shirleydt replied

5 years ago

Customer Reply

Hi, the code didn't work. If you go to the below URL, you will see it works on the desktop with facet checkbox on the left sidebar.

However, on mobile, the facet checkboxes don't show until scrolling down the page. Therefore, I am asking how to make sure the sidebar appears first? Many thanks!

https://homenaturallymade.com/browse-recipes/

PenciDesign replied

5 years ago

Staff Reply

Hi,

Please try add more this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 767px){
.container penci_sidebar{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; }
.container.penci_sidebar #main{ order: 2; }
.container.penci_sidebar .penci-sidebar-content{ order: 1; }
}

Best Regards,

PenciDesign

shirleydt started the conversation

5 years ago

Conversation Start

Hi there, how to make sure the sidebar displays first on mobile? Many thanks!