Every third generation template with tabs view for product filtering has slight design problem on mobile devices (devices with small resolution). Templates in question are 11 – Classic, 12 – Step and 14 – Samba.
There will be an update in January 2023 which will switch tabs to dropdown selection. For website without sidebar at resolutions smaller than 768px and with sidebar at 992px. This will also affect Blank template.
Take note that when this change takes effect there will be a new element present on the category page. This element has identification id="category-header-mobile".
Important note!
For element to work properly you need to be using dropdown.js provided by bootstrap. Usage can be found here: getbootstrap.com/docs/3.4/javascript/#dropdowns Make sure you have this in your javascript files.
<div id="category-header-mobile" class="category-header">
<form action="/action/ProductsListing/sortProducts/" method="post" onsubmit="return false;">
<input type="hidden" name="referer" value="">
<div class="dropdown">
<button id="products-listing-order" class="btn btn-secondary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="products-listing-order-heading">Sort by:</span>
<span class="icon-chevron-down"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="products-listing-order">
...
<li>
<label>
<input type="submit" name="" id="" value="" class="sr-only" data-url=""> ...
</label>
</li>
...
</ul>
</div>
</form>
</div>
You can use our predefined css for this as shown below or hide element completely with #category-header-mobile { display: none; } and keep using the old tab filtration.
#category-header {
display: none;
}
@media (min-width: 768px) {
.one-column-body #category-header,
.multiple-columns-body.mobile #category-header {
display: flex;
}
}
@media (min-width: 992px) {
.multiple-columns-body.desktop #category-header {
display: flex;
}
}
#category-header-mobile {
display: block;
}
@media (min-width: 768px) {
.one-column-body #category-header-mobile,
.multiple-columns-body.mobile #category-header-mobile {
display: none;
}
}
@media (min-width: 992px) {
.multiple-columns-body.desktop #category-header-mobile {
display: none;
}
}
#category-header-mobile .dropdown {
display: block;
padding: 0;
}
#category-header-mobile .dropdown button {
font-weight: 600;
width: 100%;
}
#category-header-mobile .dropdown .dropdown-menu {
left: 0;
right: 0;
}
#category-header-mobile .dropdown .dropdown-menu label,
#category-header-mobile .dropdown .dropdown-menu strong {
display: block;
line-height: 1.5;
padding: 10px 20px;
white-space: nowrap;
}
#category-header-mobile .dropdown .dropdown-menu label {
font-weight: normal;
}
#category-header-mobile .dropdown .icon-chevron-down {
margin-left: 1em;
}
#category-header-mobile .dropdown.open button .icon-chevron-down::before {
content: '\e911';
}