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!
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.
- 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:
Hi there, how to make sure the sidebar displays first on mobile? Many thanks!
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
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/
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
Perfect! Thank you so much for your prompt & effective response. Greatly appreciate it!
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
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
Awesome! Thank you so much! - Shirley