Display Sidebar Elements on Top

Hi David,

You would need to add custom CSS to the “Custom CSS” box on the Edit Catalogue page.

Here’s some code you can try using as a starting point:

.prod-cat-inner {
position:relative;
width:100%;}

.prod-cat-sidebar {
clear:both;
width:100%;
max-height:auto;
max-width: none;
z-index: 99999;
right:0;}

.prod-cat-sidebar > form > div {
    margin: 5px 15px;}
        
.prod-cat-sidebar-category-content div, .prod-cat-sidebar-subcategory-content div, .prod-cat-sidebar-content-tag div, .prod-cat-cf-sidebar-option div {
    max-width: 100%;}
    
.prod-cat-sidebar-category-title,
.prod-cat-sidebar-subcategory-title,
.prod-cat-tag-sidebar-title, .prod-cat-cf-sidebar-title  {
padding: 5px;}
    
.prod-cat-sidebar-cat-title{
    clear:both;
    width:100%;}

.prod-cat-sidebar-content{
    width:100%;}

.prod-cat-sidebar-content div{
    padding: 5px;
    display: inline-block;
}
.prod-cat-sidebar-content div.ui-slider {
    display: block;
}

.prod-cat-cf-sidebar-title {
}
.prod-cat-sidebar-cf{
width:100%;
}
.prod-cat-cf-sidebar-option div{
    float:left;
    margin:5px 5px 0;
}
.prod-cat-sidebar-category,
.prod-cat-sidebar-subcategory,
.prod-cat-sidebar-tag,
.prod-cat-sidebar-cf-value-div{
 padding: 0 4px;
}
.prod-cat-sort-by, 
  .prod-cat-text-search{
      margin-left:5px;
  }.
.styled-input {
   width: 85%;
    min-width:140px;
}
.styled-select select {
    width:auto;
}
.styled-input input[type="text"] {
 width:90%;
}
.displaying-num {
    display: inline-block;
}
.prod-cat-sidebar .styled-input {
    width: 100%;    
}

.upcp-filtering-clear-all {
    width: calc(100% - 22px);
}

.prod-cat-sidebar-content .subcat-collapsible {
    width:100%;
    padding: 0;
}
.prod-cat-sidebar-content .prod-sidebar-checkbox-block {
    display: block;
    width: 100%;
}
.prod-cat-subcat-collapsible .prod-cat-sidebar-category,
.prod-cat-subcat-collapsible  .prod-cat-sidebar-subcategory{
    display: block;
    width: 100%;
}