[Skip to main content](#vessel-content) # Mobile-only pagination for categories on homepage ## - **[Reincidente](/forum/user/12307-reincidente "View Reincidente's Profile")** - [![Reincidente's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12307-reincidente "View Reincidente's Profile") Topic Author - [ Offline](/forum/user/12307-reincidente) Less More - Posts: 467 - Thank you received: 21 - 1 year 1 week ago [\#369160](#369160) by [Reincidente](/forum/user/12307-reincidente "View Reincidente's Profile") *[Mobile-only pagination for categories on homepage](/forum/25-install-update/909846-mobile-only-pagination-for-categories-on-homepage#369160 "Hello, On my homepage I display almost 40 product categories (HikaShop categories listing). I would like that only on mobile this block uses pagination (e.g., 8–12 categories per page with a page menu or a “load more”), while on desktop the full grid remains visible. Questions: Does HikaShop natively support pagination for a categories listing (menu/module) only on mobile—via any parameter or setting? If not, what’s your recommended approach to achieve it (override of the category / listing view, menu settings, or duplicating the module with CSS show/hide by breakpoint)? Are there any known limitations for paginating categories (not products) when the listing is placed on the homepage? Is there a recommended hook/event to implement an accessible pagination without breaking updates?")* was created by *[Reincidente](/forum/user/12307-reincidente "View Reincidente's Profile")* Hello, On my homepage I display almost 40 product categories (HikaShop categories listing). I would like that only on mobile this block uses pagination (e.g., 8–12 categories per page with a page menu or a “load more”), while on desktop the full grid remains visible. Questions: Does HikaShop natively support pagination for a categories listing (menu/module) only on mobile—via any parameter or setting? If not, what’s your recommended approach to achieve it (override of the category / listing view, menu settings, or duplicating the module with CSS show/hide by breakpoint)? Are there any known limitations for paginating categories (not products) when the listing is placed on the homepage? Is there a recommended hook/event to implement an accessible <nav> pagination without breaking updates? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkwOTg0Ni1tb2JpbGUtb25seS1wYWdpbmF0aW9uLWZvci1jYXRlZ29yaWVzLW9uLWhvbWVwYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86363 - Thank you received: 14296 - - 1 year 1 week ago [\#369167](#369167) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Mobile-only pagination for categories on homepage](/forum/25-install-update/909846-mobile-only-pagination-for-categories-on-homepage#369167 "Hello, On my homepage I display almost 40 product categories (HikaShop categories listing). I would like that only on mobile this block uses pagination (e.g., 8–12 categories per page with a page menu or a “load more”), while on desktop the full grid remains visible. Questions: Does HikaShop natively support pagination for a categories listing (menu/module) only on mobile—via any parameter or setting? If not, what’s your recommended approach to achieve it (override of the category / listing view, menu settings, or duplicating the module with CSS show/hide by breakpoint)? Are there any known limitations for paginating categories (not products) when the listing is placed on the homepage? Is there a recommended hook/event to implement an accessible pagination without breaking updates?")* Hi, You can configure a category listing menu item with pagination. As long as the number of rows and columns of the menu item is lower than the total number of elements, HikaShop will automatically display a pagination for the listing. And if the number is lower, the pagination won't be displayed. However, it's not possible to change the number of columns / rows of a menu item based on the device type of the user displaying the menu item. What is possible is to create two different menu items, configure each one differently so that one has the pagination and not the other, and then use CSS to hide / display the menu items based on the user's device: [ www.facebook.com/groups/joomlanospam/posts/10160353155880997/](https://www.facebook.com/groups/joomlanospam/posts/10160353155880997/) While this would work for most menu items, it wouldn't help for the homepage. So, up to this point, that's what I would say for someone who doesn't / can't code. If you're a developer, I would recommend making an override of the category / listing_div view file via the menu Display>Views. There, you can add : - some CSS code to hide the rows of categories you don't want to be displayed by default on mobile devices. For example: Code: <style> @media (max-width:962px) { .hikashop_category_row_2, .hikashop_category_row_3, .hikashop_category_row_4, .hikashop_category_row_5 { display:none; } } </style> - a "load more" button with a bit of javascript to display more rows. For example: Code: <a href="#" class="loadmorebutton" onclick="document.querySelector('.hikashop_category_row_2').display = 'block'; return false;"> load more </a> <style> @media (min-width:963px) { .loadmorebutton { display: none;} } </style> That's of course a simplified solution to get you started. The real code will need more complex javascript and proper coding. Since this won't be a real pagination, I don't think you should add a nav tag. If you want to add a nav tag around the categories listing pagination displayed by HikaShop, in that same category / listing_div view file, you can add the tag around the pagination near the bottom of the view file: Code: <?php echo $this->pagination->getListFooter($this->params->get('limit')); ?> <span class="hikashop_results_counter"><?php echo $this->pagination->getResultsCounter(); ?></span> Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkwOTg0Ni1tb2JpbGUtb25seS1wYWdpbmF0aW9uLWZvci1jYXRlZ29yaWVzLW9uLWhvbWVwYWdlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.060 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)