...

The common design pattern is to move the filter into offcanvas on mobile. theme-creativeshop offers a built-in possibility to move filters into offcanvas on mobile and/or desktop. (However, desktop offcanvas filters are very rarely used)

Storefront

...

Display offcanvas toggle button and enable offcanvas filters:

...

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Regular.woff2') format('woff2'),
        url('../fonts/PT-Sans_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/PT-Sans_Bold.woff2') format('woff2'),
        url('../fonts/PT-Sans_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: optional;
}

Change category links component mobile layout from dropdown to scrollable list

In order to introduce a scrollable list for the category links component override the following files in your theme:

1. src/MageSuite_ContentConstructorFrontend/templates/component/category_links.phtml

   1. remove initialisation of collapsible widget: data-mage-init='{"collapsible":{"mediaQueryScope":"(max-width: 767px)"},"ccCategoryLinks":{}}'

   2. remove dropdown trigger: cs-category-links__subtitle | cs-category-links-dropdown__trigger

2. src/components/category-links/index.ts

   1. In order to avoid including not used styles remove import 'components/category-links/category-links-dropdown.scss'; import. Leave only import components/category-links/category-links.scss'; import

In etc/view.xml file decide how many items should be shown in the component. To always show every subcategory, which was selected in the admin panel, use a high number, f.e.

<var name="category_links">
    <var name="hide_links_breakpoints">
        <var name="tablet">
            <var name="hide_from">99</var>
        </var>
        <var name="laptop">
            <var name="hide_from">99</var>
        </var>
        <var name="laptopLg">
            <var name="hide_from">99</var>
        </var>
        <var name="desktop">
            <var name="hide_from">99</var>
        </var>
    </var>
</var>

The following CSS can be helpful in order to make a native scroll on a list with subcategory items. use it in src/components/category-links/category-links.scss file.

&__list-wrapper {
    display: flex;
    padding-left: $page_edge-gutter;
    padding-right: $page_edge-gutter;
    scroll-padding-left: $page_edge-gutter;
    scroll-padding-right: $page_edge-gutter;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
}