30% Discount Get your Kallyas WordPress license Today for only $49! Or renew your support at $18 for extra 6 months. Shop Now

Sidebar position customisations

Change sidebar position through options:#

To change a page’s sidebar position individually, you can access the page in backend and look for the Sidebar Position Options (or Post Layout options, for older theme versions ) eg: http://take.ms/iIxDFQ .

If you want to customize the sidebar position (or disable it) for a broader number of pages, for example custom post types, such as WooCommerce products, or Portfolio Items etc. you can access Theme options > Sidebar Options > Sidebar settings eg: http://take.ms/c0usP .

Display Sidebar first on mobiles:#

For normal WordPress pages:#

By default, the theme will show the sidebar on mobiles, under the main content. To change this, please follow these steps:

Access Theme options > Advanced > Custom CSS and paste this code:

@media (max-width: 767px) {
 .site-content > .container > .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
 .site-content > .container > .row > .col-md-pull-9 { -ms-flex-preferred-size: 100%; flex-basis: 100%; -ms-flex-order: 1; order: 1; }
 .site-content > .container > .row > .col-md-push-3 { -ms-flex-order: 2; order: 2; }
}

 

For WooCommerce pages with sidebar :#

Access Theme options > Advanced > Custom CSS and paste this code:

@media (max-width: 767px) {
 .shop_page > .container > .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
 .shop_page > .container > .row > .col-md-pull-9 { -ms-flex-preferred-size: 100%; flex-basis: 100%; -ms-flex-order: 1; order: 1; }
 .shop_page > .container > .row > .col-md-push-3 { -ms-flex-order: 2; order: 2; }
}

#