Move sidebar up in WordPress (or other CMS)

In this example I only applied the rules to the homepage which has the body class .home

You apply the 1st class #content-wrapper to the main content wrapper (which contains the sidebar AND content).

2nd you apply the #sidebar class to the sidebar. By giving the order number 1 you set it on top.

3rd you apply the #content class to the content. By giving number 2 it moves below the sidebar content.

4th, you can choose to also give the sidebar content a specific ordering. You might want to display the categories on top, and hide a facebook feed..
This is done by putting another div with an unique ID inside the sidebar div. You then apply step 1 - 3 again, but this time for inside the sidebar wrapper.

 

@media (max-width: 767px) {

/*STEP 1*/

.home #content-wrapper { display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;}

/*STEP 2*/
.home #sidebar {    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;}

/*STEP 3*/
.home #content  {     -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;}

/* STEP 4, another div inside the sidebar which we use to change the ordering on just the homepage  to make it easier for visitors. */


.home #sidebar-resp-mob { display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;}


.home #woocommerce_product_search-2{    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;}


.home #woocommerce_product_categories-3 {     -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;}


.home #woocommerce_products-2 {     -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;}


  #text-2 { display:none;} /*Facebook*/
  #text-3 { display:none;} /*Banner*/

}

Hebt u meer vragen? Een aanvraag indienen

Opmerkingen

Mogelijk gemaakt door Zendesk